"use client";

import Link from "next/link";
import { cn } from "@/lib/utils";
import type { CanvasTemplate, CanvasStatus } from "@/lib/types";

interface CanvasCardProps {
  canvas: CanvasTemplate;
  status: CanvasStatus;
  className?: string;
}

export function CanvasCard({ canvas, status, className }: CanvasCardProps) {
  // Determine card style based on status
  // Not started: Default (White)
  // Started: Light Orange
  // Finished: Green

  let headerBgColor = "bg-white";
  // Badge color based on week: Week 1 = Orange, Week 2 = Blue, Week 3 = Green
  let badgeColor = canvas.week === 1 ? "#f97316" : canvas.week === 2 ? "#155dfc" : "#16A34A";
  let statusBorderColor = "border-black";

  if (status === "started") {
    headerBgColor = "bg-orange-100";
    statusBorderColor = "border-orange-300";
  } else if (status === "finished") {
    headerBgColor = "bg-green-100";
    statusBorderColor = "border-green-500";
  }

  return (
    <Link
      href={`/canvas/${canvas.id}`}
      className={cn(
        "group block border-2 border-black",
        "transition-all duration-200 ease-out",
        "hover:shadow-lg hover:-translate-y-0.5",
        "flex flex-col h-full", // Make card fill height
        headerBgColor, // Apply background color to entire card
        statusBorderColor,
        className
      )}
    >
      {/* Header Area */}
      <div className={cn(
        "p-6 pb-0"
      )}>
        <div className="flex items-start gap-3">
          {/* Number Badge - Square */}
          <div
            className="w-8 h-8 flex items-center justify-center flex-shrink-0"
            style={{ backgroundColor: badgeColor }}
          >
            <span className="text-[14px] font-bold text-white leading-[20px] tracking-[-0.15px]">
              {canvas.exerciseNumber}
            </span>
          </div>

          {/* Content */}
          <div className="flex-1 min-w-0">
            <h3 className="text-[18px] font-normal text-[#0a0a0a] uppercase tracking-[0.01px] leading-[22.5px]">
              {canvas.title}
            </h3>
          </div>
        </div>
      </div>

      {/* Subtitle Area */}
      {canvas.subtitle && (
        <div className="px-6 pt-3 pb-6 flex-1">
          <p className="text-[14px] text-[#4a5565] leading-[20px] tracking-[-0.15px]">
            {canvas.subtitle}
          </p>
        </div>
      )}
    </Link>
  );
}