"use client";
import { useTranslations } from "next-intl";
import { Delete, Edit } from "../Icons";
import { Switch } from "../ui/switch";
import { Addresses } from "@/interfaces/types";

type Props = {
  address: Addresses;
  EditItem?: any;
  deleteItem?: any;
  setDefault?: any;
};

export default function AddressCard({
  EditItem,
  deleteItem,
  setDefault,
  address,
}: Props) {
  const t = useTranslations("");

  return (
    <div className=" bg-white  p-4 rounded-2xl flex flex-col gap-2 ">
      <div className="flex justify-between items-center">
        <p className="text-primary-dark text-lg leading-6 text-start font-medium ">
          {address?.description}
        </p>
        <div className=" items-center gap-2 md:flex hidden">
          <p>{t("Text.setAsMain")}</p>
          <Switch
            checked={address?.is_default}
            onCheckedChange={() => setDefault()}
          />
        </div>
      </div>
      <div className="font-normal text-sm leading-5 text-start text-sub flex flex-col gap-2">
        {/* <p>{address?.description}</p> */}
        <p>
          +{address?.contact?.phone_code}
          {address?.contact?.phone}
        </p>
        <div className="flex flex-col gap-1">
          <span className="text-xs text-text-secondary">
            {address?.location?.country?.name}, {address?.location?.city?.name},{" "}
            {address?.location?.district?.name}
          </span>
        </div>
      </div>

      <div className="flex sm:flex-row flex-col gap-3">
        <div className="flex items-center gap-2">
          <Edit
            className="size-8 border border-secondarydark p-[5px] cursor-pointer rounded-xl"
            onClick={EditItem}
          />
          {/* {+address?.is_default == 0 && ( */}
          <Delete
            color="#3E3E3E"
            className="size-8 border border-secondarydark p-[5px] cursor-pointer rounded-xl"
            onClick={deleteItem}
          />
          {/* )} */}
        </div>
        <div className=" items-center gap-2 md:hidden flex">
          <p>{t("Text.setAsMain")}</p>
          <Switch
            checked={address?.is_default}
            onCheckedChange={() => setDefault()}
          />
        </div>
      </div>
    </div>
  );
}