// @bun
// src/components/templates/todos/TaskItem.tsx
import { Check, Circle, Trash2 } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function TaskItem({ task, onToggle, onDelete }) {
  const badgeColor = task.priority === "URGENT" ? "text-red-200 bg-red-500/10 border-red-500/40" : task.priority === "HIGH" ? "text-amber-200 bg-amber-500/10 border-amber-500/40" : task.priority === "LOW" ? "text-emerald-200 bg-emerald-500/10 border-emerald-500/40" : "text-violet-200 bg-violet-500/10 border-violet-500/40";
  return /* @__PURE__ */ jsxs("div", {
    className: "border-border/70 bg-card/60 hover:border-border flex items-start gap-4 rounded-2xl border p-4 transition",
    children: [
      /* @__PURE__ */ jsx("button", {
        type: "button",
        className: "border-border text-muted-foreground hover:bg-muted/40 rounded-full border p-2",
        "aria-pressed": task.completed,
        onClick: () => onToggle?.(task),
        children: task.completed ? /* @__PURE__ */ jsx(Check, {
          className: "h-4 w-4 text-emerald-400"
        }) : /* @__PURE__ */ jsx(Circle, {
          className: "h-4 w-4"
        })
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex-1 space-y-2",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "flex flex-wrap items-center gap-2",
            children: [
              /* @__PURE__ */ jsx("p", {
                className: `font-medium ${task.completed ? "text-muted-foreground line-through" : "text-foreground"}`,
                children: task.title
              }),
              /* @__PURE__ */ jsx("span", {
                className: `rounded-full border px-2 py-0.5 text-xs ${badgeColor}`,
                children: task.priority.charAt(0) + task.priority.slice(1).toLowerCase()
              }),
              task.category ? /* @__PURE__ */ jsx("span", {
                className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
                children: task.category.name
              }) : null,
              task.dueDate ? /* @__PURE__ */ jsxs("span", {
                className: "text-muted-foreground text-xs",
                children: [
                  "Due ",
                  new Date(task.dueDate).toLocaleDateString()
                ]
              }) : null
            ]
          }),
          task.description ? /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-sm",
            children: task.description
          }) : null,
          task.tags.length ? /* @__PURE__ */ jsx("div", {
            className: "flex flex-wrap gap-1",
            children: task.tags.map((tag) => /* @__PURE__ */ jsxs("span", {
              className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
              children: [
                "#",
                tag
              ]
            }, tag))
          }) : null
        ]
      }),
      /* @__PURE__ */ jsx("button", {
        type: "button",
        className: "text-muted-foreground hover:text-destructive",
        "aria-label": `Delete ${task.title}`,
        onClick: () => onDelete?.(task),
        children: /* @__PURE__ */ jsx(Trash2, {
          className: "h-4 w-4"
        })
      })
    ]
  });
}
export {
  TaskItem
};
