import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { Document, Link2, More } from "iconsax-react";
import { type FC } from "react";
import { timeAgo } from "../../../../../config/func";

type Props = {
  title: string;
  createdAt?: string;
  type: "file" | "link";
  url?: string;
  onEdit: () => void;
  onDelete: () => void;
};

const AttachmentItem: FC<Props> = ({ title, createdAt, type, url, onEdit, onDelete }) => {
  return (
    <div className="flex items-center justify-between gap-2">
      <div className="flex items-center gap-2 flex-1 min-w-0">
        <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
          {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
        </div>

        <div className="min-w-0">
          {url ? (
            <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
              {title}
            </a>
          ) : (
            <div className="text-xs font-bold truncate">{title}</div>
          )}
          {createdAt && <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>}
        </div>
      </div>

      <Popover className="relative shrink-0">
        <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
          <More size={18} color="#292D32" />
        </PopoverButton>

        <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
          <button type="button" onClick={onEdit} className="w-full text-sm text-right">
            ویرایش
          </button>

          <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
            پاک کردن
          </button>
        </PopoverPanel>
      </Popover>
    </div>
  );
};

export default AttachmentItem;