'use client'

import { CATEGORIES, EmailTemplate, STATUS_BADGE } from '../_types'

interface TemplateCardProps {
  template: EmailTemplate
  onEdit: () => void
}

export function TemplateCard({ template, onEdit }: TemplateCardProps) {
  const cat = CATEGORIES[template.category] || CATEGORIES.general
  const version = template.latest_version
  const status = version ? (STATUS_BADGE[version.status] || STATUS_BADGE.draft) : STATUS_BADGE.draft

  return (
    <div
      className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
      onClick={onEdit}
    >
      <div className="flex items-start justify-between mb-2">
        <div>
          <h3 className="font-medium text-gray-900 text-sm">{template.name}</h3>
          <span className={`inline-block mt-1 px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>
            {cat.label}
          </span>
        </div>
        <span className={`px-2 py-0.5 rounded text-xs ${status.color}`}>{status.label}</span>
      </div>
      {template.description && (
        <p className="text-xs text-gray-500 mt-2 line-clamp-2">{template.description}</p>
      )}
      <div className="mt-3 flex flex-wrap gap-1">
        {(template.variables || []).slice(0, 4).map(v => (
          <span key={v} className="px-1.5 py-0.5 bg-gray-50 text-gray-500 rounded text-xs font-mono">
            {`{{${v}}}`}
          </span>
        ))}
        {(template.variables || []).length > 4 && (
          <span className="text-xs text-gray-400">+{template.variables.length - 4}</span>
        )}
      </div>
      {version && (
        <div className="mt-3 text-xs text-gray-400">
          v{version.version} &middot; {version.created_at ? new Date(version.created_at).toLocaleDateString('de-DE') : ''}
        </div>
      )}
    </div>
  )
}