import type { NoteIndexItem } from "../../api/notesApi";
import Button from "../ui/Button";

type NoteListItemProps = {
  item: NoteIndexItem;
  active: boolean;
  onClick: () => void;
  onDelete: () => void;
};

export default function NoteListItem({ item, active, onClick, onDelete }: NoteListItemProps) {
  return (
    <Button
      onClick={onClick}
      radius="2xl"
      className={`w-full px-3 py-3 text-left transition ${
        active ? "bg-white shadow" : "bg-transparent hover:bg-white/70"
      }`}
    >
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-sm font-semibold text-[var(--ink)] line-clamp-1">{item.title}</h3>
        <div className="flex items-center gap-2">
          <span
            className={`text-[10px] uppercase tracking-wide ${
              item.sync.status === "synced"
                ? "text-emerald-600"
                : item.sync.status === "syncing"
                ? "text-amber-500"
                : item.sync.status === "error"
                ? "text-red-500"
                : "text-[var(--muted)]"
            }`}
          >
            {item.sync.status}
          </span>
          <Button
            onClick={(event) => {
              event.stopPropagation();
              onDelete();
            }}
            className="border border-slate-200 px-2 py-1 text-[10px] text-slate-500 hover:text-red-600"
          >
            Sil
          </Button>
        </div>
      </div>
      <p className="mt-1 text-xs text-[var(--muted)]">{new Date(item.updatedAt).toLocaleString("tr-TR")}</p>
    </Button>
  );
}
