import type { JSX } from 'react';
import { IProcessItem } from '../lib/data';
import Image from 'next/image';

interface IHomeProcessCardProps {
  item: IProcessItem;
}

const HomeProcessCard = ({ item }: IHomeProcessCardProps): JSX.Element => {
  return (
    <div className="border rounded-sm bg-white relative p-[12px] h-full">
      <div className="flex flex-col justify-between items-center gap-2 relative z-10 h-full">
        <div className="relative">
          <Image
            className="w-[150px] h-[100px] object-contain relative z-[2] mix-blend-multiply"
            src={item.image}
            alt={item.title}
            width={400}
            height={400}
          />
          <div className="absolute size-[100px] top-0 right-[20px] z-[1] bg-gray-50 rounded-full"></div>
        </div>
        <div>
          <h4 className="text-[18px] font-bold text-accent text-center">
            {item.title}
          </h4>
          <p className="text-[13px] font-medium text-muted text-center">
            {item.description}
          </p>
        </div>
      </div>
      <div className='absolute right-0 bottom-0 w-[170px] bg-cover h-[150px] bg-[url("/images/home-process-card/card-bg.webp")] z-0'></div>
    </div>
  );
};

export default HomeProcessCard;
