import React from 'react';
import { useTranslations } from 'next-intl';
import CustomCard from './CustomCard';
import { StaticImageData } from 'next/image';
import { QuoteSVG } from '@/assets/svg';
import { H4, P, S } from '../typography';
import CustomImage from '../miscellaneous/CustomImage';
import { metaTitles } from '@/components/metaData/metaTitles';

interface ITestemonialCard {
    testimonial: {
        image: StaticImageData | string,
        quote: string;
        name: string;
        scale?: number;
        description: string;
    };
    className?: string
}

const TestemonialCard = ({ testimonial, className }: ITestemonialCard) => {
    const t = useTranslations();

    return (
        <CustomCard
            className={`${className} group  mb-4  p-[0px] rounded-lg w-[360px] lg:w-[846px] lg:h-[379px] border-none shadow-lg flex flex-col lg:flex-row items-center gap-10 overflow-hidden`}
        >
            <CustomImage pageTitle={metaTitles?.defaultMeta_Title} loading="lazy" src={testimonial.image} alt={testimonial.name} className={`group-hover:scale-[1.05] duration-300 h-full object-[center_top] max-lg:h-[360px] object-cover lg:w-[300px] max-lg:rounded-t-lg lg:rounded-l-lg `} style={{scale:testimonial.scale}} />
            <div className='flex flex-col gap-8 max-lg:p-5 px-2 '>
                <QuoteSVG className={"text-primary w-7 h-7"}/>
                <P className='text-lg leading-7 h-[200px]  sm:h-[170px] overflow-y-scroll customScroll'>{t(testimonial.quote)}</P>
                <div>
                    <H4 className=' '>{testimonial.name}</H4>
                    <S className=' text-muted-foreground pt-2 max-sm:text-[12px] group-hover:text-primary  duration-500 '>{t(testimonial.description)}</S>
                </div>
            </div>
        </CustomCard>
    );
};

export default TestemonialCard;