import { ProductTypes } from "@/types";
import Image, { StaticImageData } from "next/image";
import Link from "next/link";
import Text from "../text";

export default function SliderCard({data}:{data:ProductTypes}) {
  return (
    <Link href={data.path} id="news_slider_card" className="group hover:cursor-pointer" >
        <Image 
        src={data.image} 
        alt="slider image" 
        width={600} 
        height={600} 
        className="object-cover max-w-[600px] w-full h-[300px]" 
        />
        <div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
            <div className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
              <Text txt={data.truck_name}/>
            </div>
            <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary"><Text txt={data.desc}/></div>
        </div>
    </Link>
  )
}