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_INDICATOR: Record<string, string> = {
  urgent: "border-l-red-500",
  high: "border-l-orange-500",
  medium: "border-l-yellow-500",
  low: "border-l-green-500",
};

export default function TaskCard({ task }: TaskCardProps) {
  const priorityClass = PRIORITY_INDICATOR[task.priority] || PRIORITY_INDICATOR.medium;

  return (
    <Link href={`/tasks/${task.id}`}>
      <div
        className={`bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 border-l-4 ${priorityClass} rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer`}
      >
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            <h3
              className={`font-medium truncate ${
                task.status === "done" ? "line-through text-muted" : ""
              }`}
            >
              {task.title}
            </h3>
            {task.description && (
              <p className="text-sm text-muted mt-1 line-clamp-2">{task.description}</p>
            )}
            <div className="flex items-center gap-2 mt-2 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: task.group_color || "#6b7280" }}
                >
                  {task.group_name}
                </span>
              )}
              {task.due_at && (
                <span className="text-xs text-muted">
                  {new Date(task.due_at).toLocaleDateString("cs-CZ")}
                </span>
              )}
            </div>
          </div>
          <div className="flex-shrink-0">
            <span className="text-xs text-muted">
              {task.priority === "urgent" ? "!!!" : task.priority === "high" ? "!!" : task.priority === "medium" ? "!" : ""}
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
}