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

interface ICaseStudyCard {
    testimonial: {
        image: StaticImageData | string,
        title: string;
        quote: string;
        name: string;
        description: string;
        link:string
    };
    className?: string
}

const CaseStudyCard = ({ testimonial, className }: ICaseStudyCard) => {
    const t = useTranslations();

    return (
        <CustomCard
            className={` ${className}  p-6 rounded-lg w-[360px] lg:w-[846px] lg:h-[479px] border-none shadow-lg flex flex-col lg:flex-row items-center gap-10`}>
            <CustomImage pageTitle={metaTitles?.defaultMeta_Title} src={testimonial.image} alt={testimonial.name} className="h-full object-[-120px,0px] max-lg:h-[350px] object-cover lg:w-[350px] rounded-t-lg lg:rounded-l-lg" />
            <div className='flex flex-col gap-8  '>
                <H3 className=''>{t(testimonial.title)}</H3>
                <QuoteSVG className={"text-primary w-7 h-7"}/>
                <P className='text-xl leading-7'>{t(testimonial.quote)}</P>
                <div className='flex justify-between items-center'>

                <div>
                    <P className='  '>{testimonial.name}</P>
                    <H4 className='pt-1 '>{testimonial.description}</H4>
                </div>
                <Button link={testimonial.link}>{t("Read case study")} </Button>
                </div>
            </div>
        </CustomCard>
    );
};

export default CaseStudyCard;