"use client";

import { Template } from "@/lib/api";
import { Trash2, FileText, Users, CheckSquare, Calendar, Sparkles } from "lucide-react";

interface TemplateCardProps {
  template: Template;
  onDelete?: (template: Template) => void;
  onApply?: (template: Template) => void;
}

const CATEGORY_ICONS: Record<string, typeof FileText> = {
  onboarding: Users,
  project: CheckSquare,
  standup: Calendar,
  brainstorm: Sparkles,
  default: FileText,
};

export function TemplateCard({ template, onDelete, onApply }: TemplateCardProps) {
  const Icon = CATEGORY_ICONS[template.category] || CATEGORY_ICONS.default;
  const channelCount = template.channels?.length || 0;

  return (
    <div className="group p-4 rounded-lg border border-gray-200 bg-white shadow-sm hover:border-slack-purple/30 transition-colors">
      <div className="flex items-start gap-3">
        {/* Icon */}
        <div className="w-10 h-10 rounded-lg bg-slack-purple/10 flex items-center justify-center flex-shrink-0">
          <Icon size={20} className="text-slack-purple" />
        </div>

        {/* Info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-gray-800 truncate">{template.name}</h3>
            <span className="text-[10px] px-2 py-0.5 rounded-full font-medium bg-gray-100 text-gray-500 capitalize">
              {template.category}
            </span>
          </div>

          {template.description && (
            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{template.description}</p>
          )}

          {channelCount > 0 && (
            <p className="text-xs text-gray-400 mt-2">
              {channelCount} channel{channelCount > 1 ? "s" : ""}
            </p>
          )}
        </div>

        {/* Actions */}
        <div className="flex items-center gap-1 flex-shrink-0">
          {onApply && (
            <button
              onClick={() => onApply(template)}
              className="px-2 py-1 text-xs text-slack-purple hover:bg-slack-purple/5 rounded transition-colors font-medium"
            >
              Apply
            </button>
          )}
          {onDelete && (
            <button
              onClick={() => onDelete(template)}
              className="p-1.5 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-colors"
              title="Delete template"
            >
              <Trash2 size={14} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default TemplateCard;