import { useTranslations } from 'next-intl';
import  { StaticImageData } from 'next/image';
import React from 'react'
import { Button } from '../buttons/Button';
import { H5, S } from '../typography';
import { ArrowDown } from 'lucide-react';
import CustomImage from '../miscellaneous/CustomImage';
interface CardProps {
    imageSrc: StaticImageData;
    imageAlt: string;
    imagePosition: string;
    title: string;
    description: string;
    metaTitle: string;
    url:string
}
const ImageDetailsCard: React.FC<CardProps> = ({ metaTitle, imageSrc, imageAlt, imagePosition, title, description ,url}) => {
    const t = useTranslations();
    return (
        <div className="w-full sm:w-[400px] h-[600px] relative shadow-lg hover:shadow-black/65 hover:scale-[1.03] duration-300 shadow-black/35 rounded-lg overflow-hidden group">
            <CustomImage pageTitle={metaTitle}
                src={imageSrc}
                alt={imageAlt}
                style={{objectPosition:imagePosition}}
                className={`w-full h-full object-cover   rounded-lg group-hover:scale-105 duration-300`}
            />
            <div className="absolute bottom-[-55px] group-hover:bottom-0 duration-300 p-4 flex flex-col gap-4 z-20 w-full">
                <div className="flex items-center justify-between">
                    <H5 className="text-white">{t(title)}</H5>
                    <Button link={url} className="bg-white w-fit text-foreground hover:bg-white hover:text-black group/button">
                        {t("View Details")}<ArrowDown className="max-w-0 group-hover/button:max-w-6 opacity-0 group-hover/button:opacity-100 -rotate-90 duration-500" />
                    </Button>
                </div>
                <S className="!font-normal text-gray-300  h-10">{t(description)}</S>
            </div>
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 opacity-40 to-transparent z-10 group-hover:opacity-100 duration-300"></div>
        </div>
    );
};

export default ImageDetailsCard