import CategoryImage from "@/assets/images/category.jpg";
import { ArrowLeft } from "iconsax-reactjs";
import Image from "next/image";
import { type FC } from "react";

type CategoryCardProps = {
  title: string;
};

const CategoryCard: FC<CategoryCardProps> = ({ title }) => {
  return (
    <div className="w-full bg-[#D4E3F154]/33 rounded-[24px] sm:rounded-[40px] p-4 sm:p-6">
      <div className="flex justify-between items-center gap-2">
        <div className="text-[#21588C] font-bold text-sm sm:text-base">{title}</div>
        <div className="bg-white/40 flex justify-center items-center">
          <ArrowLeft size={20} color="currentColor" className="text-primary rotate-45" />
        </div>
      </div>
      <div className="mt-4">
        <Image src={CategoryImage} alt={title} width={300} height={300} className="w-full h-auto rounded-3xl" />
      </div>
    </div>
  );
};

export default CategoryCard;