task-team/apps/tasks/components/TaskCard.tsx

"use client";

import { Task } from "@/lib/api";
import StatusBadge from "./StatusBadge";
import Link from "next/link";

interface TaskCardProps {
  task: Task;
}

const PRIORITY_DOT: Record<string, string> = {
  urgent: "\ud83d\udd34",
  high: "\ud83d\udfe0",
  medium: "\ud83d\udfe1",
  low: "\ud83d\udfe2",
};

function isDone(status: string): boolean {
  return status === "done" || status === "completed";
}

export default function TaskCard({ task }: TaskCardProps) {
  const dot = PRIORITY_DOT[task.priority] || PRIORITY_DOT.medium;
  const groupColor = task.group_color || "#6b7280";
  const taskDone = isDone(task.status);

  return (
    <Link href={`/tasks/${task.id}`} className="block group">
      <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-200 active:scale-[0.98]">
        {/* Color bar on left */}
        <div
          className="absolute left-0 top-0 bottom-0 w-1 rounded-l-xl"
          style={{ backgroundColor: groupColor }}
        />

        <div className="pl-4 pr-4 py-3.5">
          <div className="flex items-start gap-3">
            {/* Group icon */}
            {task.group_icon && (
              <span className="text-xl flex-shrink-0 mt-0.5">{task.group_icon}</span>
            )}

            {/* Content */}
            <div className="flex-1 min-w-0">
              <div className="flex items-start justify-between gap-2">
                <h3
                  className={`font-semibold text-[15px] leading-snug ${
                    taskDone ? "line-through text-muted" : ""
                  }`}
                >
                  {task.title}
                </h3>
                <span className="flex-shrink-0 text-sm" title={task.priority}>
                  {dot}
                </span>
              </div>

              {task.description && (
                <p className="text-sm text-muted mt-1 line-clamp-2 leading-relaxed">
                  {task.description}
                </p>
              )}

              <div className="flex items-center gap-2 mt-2.5 flex-wrap">
                <StatusBadge status={task.status} />
                {task.group_name && (
                  <span
                    className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white"
                    style={{ backgroundColor: groupColor }}
                  >
                    {task.group_name}
                  </span>
                )}
                {task.due_at && (
                  <span className="text-xs text-muted flex items-center gap-1">
                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    {new Date(task.due_at).toLocaleDateString("cs-CZ")}
                  </span>
                )}
              </div>
            </div>
          </div>

          {/* Swipe hint on mobile */}
          <div className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-30 transition-opacity sm:hidden">
            <svg className="w-4 h-4 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </div>
        </div>
      </div>
    </Link>
  );
}