'use client';

import { type Draft } from '@/lib/db/draft-service';
import { formatRelativeDate } from '@/lib/utils/date';

interface HistoryCardProps {
  draft: Draft;
  onClick: (draft: Draft) => void;
}

/**
 * HistoryCard Component
 *
 * Story 3.1: Individual history item for the feed
 *
 * Displays a completed draft with:
 * - Title (Merriweather serif font)
 * - Relative date ("Today", "Yesterday", etc.)
 * - Tags (if present)
 * - Content preview (first 100 chars)
 * - Click to view full detail
 *
 * Accessibility:
 * - Semantic button with aria-label
 * - 44px minimum touch target
 */
export function HistoryCard({ draft, onClick }: HistoryCardProps) {
  // Generate preview text (first 100 chars)
  const preview = draft.content.slice(0, 100);

  // Calculate the display date (use completedAt if available, otherwise createdAt)
  const displayDate = draft.completedAt || draft.createdAt;

  return (
    <button
      onClick={() => onClick(draft)}
      type="button"
      className="history-card group w-full text-left p-4 bg-card rounded-lg shadow-sm hover:shadow-md transition-shadow border border-border"
      aria-label={`View post: ${draft.title}`}
    >
      {/* Title - Merriweather serif font for "published" feel */}
      <h3 className="history-title text-lg font-bold text-card-foreground mb-2 font-serif leading-tight line-clamp-2">
        {draft.title}
      </h3>

      {/* Date - Inter font, subtle gray, relative format */}
      <p className="history-date text-sm text-muted-foreground mb-2 font-sans">
        {formatRelativeDate(displayDate)}
      </p>

      {/* Tags - pill badges */}
      {draft.tags && draft.tags.length > 0 && (
        <div className="flex flex-wrap gap-2 mb-2">
          {draft.tags.map((tag) => (
            <span
              key={tag}
              className="tag-chip px-2 py-1 bg-secondary text-secondary-foreground rounded-full text-xs font-sans"
            >
              #{tag}
            </span>
          ))}
        </div>
      )}

      {/* Preview - light gray text */}
      <p className="history-preview text-sm text-muted-foreground/80 font-sans line-clamp-2">
        {preview}
        {draft.content.length > 100 && '...'}
      </p>
    </button>
  );
}
