"use client"
import { MdOutlineEdit, MdOutlineDeleteOutline } from "react-icons/md";
import { IoIosArrowForward } from "react-icons/io";
import { useTranslations } from "next-intl";


interface Props {
  item: any;
  locale: string;
  onEdit: () => void;
  onView: () => void;
  onDelete: () => void;
}

export default function SearchCard({ item, locale, onEdit, onView, onDelete }: Props) {
  const t = useTranslations();
  return (
    <div className="bg-white border border-neutrals100 rounded-md p-4 mb-4 shadow-sm hover:shadow-lg transition-all hover:border-primary100 dark:bg-darkbg dark:border-darkborder">
      {/* Header */}
      <div className="flex items-start justify-between">
        <h2 className="text-base font-semibold text-neutrals900 mb-2 max-sm:text-sm dark:text-neutrals100">
          {item.title}
        </h2>
        <div className="flex gap-2">
          <MdOutlineEdit onClick={onEdit} size={23} className="text-neutrals500 cursor-pointer hover:text-primary500 dark:hover:text-primary400" />
          <MdOutlineDeleteOutline onClick={onDelete} size={24} className="text-red-600 cursor-pointer hover:text-red-700" />
        </div>
      </div>

      {/* Attributes */}
      <div className="flex flex-wrap gap-5 gap-y-2.5 text-sm bg-neutrals50 mb-2.5 py-1 px-2 dark:bg-cardfooter">
        {item.price && (
          <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
            <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">Price</div>
            <div className="font-semibold text-sm dark:text-neutrals300">{item.price}</div>
          </div>
        )}

        {/* Dynamic Attributes */}
        {item.filters.map((attr: any, idx: number) => (
          <div key={idx} className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
            <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
              {locale === "en" ? attr.label?.en : attr.label?.ar}
            </div>
            <div className="font-semibold text-sm dark:text-neutrals300 flex gap-2 flex-wrap">
              {attr.values.map((val: any, i: number) => {
                const textVal = locale === "en" ? val.value?.en : val.value?.ar;
                const fileUrl = locale === "en" ? val.meta?.fileUrl_en : val.meta?.fileUrl_ar;

                const isTag = attr?.name?.toLowerCase().includes("tag");
                if (isTag) {
                  return (
                    <span key={i} className="bg-neutrals100 text-neutrals700 text-xs font-semibold px-2 py-1 rounded-full dark:bg-cardfooter dark:text-neutrals300">
                      {textVal}
                    </span>
                  );
                }

                return textVal ? (
                  <span key={i}>
                    {textVal}
                    {i != attr.values.length - 1 ? ", " : ""}
                  </span>
                ) : fileUrl ? (
                  <img key={i} src={`${process.env.NEXT_PUBLIC_API}/${fileUrl}`} alt={val.meta?.originalFileName_en || "attribute"} className="w-12 h-12 object-cover rounded" />
                ) : null;
              })}
            </div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div className="flex items-start justify-between gap-1">
        <p className="text-sm text-neutrals500 mt-4 dark:text-neutrals400">
          {t("created_on")} {item.createdOn}
        </p>
        <button className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180">
          <IoIosArrowForward onClick={onView} className="text-primary500 dark:text-primary400" />
        </button>
      </div>
    </div>
  );
}