import { useTranslation } from 'next-i18next'
import Image from 'next/image'

export const OpinionCardSmall = ({
  review,
  sizeCard,
  className
}: {
  review: any
  sizeCard: number
  className?: string
}) => {
  const { t } = useTranslation()

  return (
    <>
      <div
        style={{ width: `${sizeCard}px` }}
        key={review.id}
        className={`${className} hover:bg-[#F8F8F8] hover:border-[#546E7A] flex flex-col justify-between rounded-lg h-full`}
      >
        <div className="cursor-pointer">
          <Image
            src={review.image}
            alt=""
            sizes="100vw"
            style={{
              width: '100%',
              height: 'auto'
            }}
          />
          <div className="relative">
            <div className="absolute bottom-4 left-3 bg-primary-900 w-20 h-20 rounded-full">
              <div className="absolute bottom-[3px] right-[3px] bg-[#D9D9D9] w-[75px] h-[75px] rounded-full"></div>
            </div>
            <div className="grid grid-cols-3 h-14 bg-primary-900 items-center justify-center ">
              <div className="grid col-span-1"></div>
              <div className="grid col-span-2 h-full justify-center items-center">
                <p className="text-base font-bold">{review.title}</p>
                <p className="text-xs">{review.fecha}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
