'use client';

import { BookOpen, Sparkles } from 'lucide-react';

interface EmptyHistoryStateProps {
  onStartVent?: () => void;
}

/**
 * EmptyHistoryState Component
 *
 * Story 3.1: Encouraging empty state for new users
 *
 * Shown when user has no completed drafts yet.
 * Displays:
 * - Encouraging message
 * - Calming illustration (using icons)
 * - CTA to start first vent
 */
export function EmptyHistoryState({ onStartVent }: EmptyHistoryStateProps) {
  return (
    <div className="empty-history-state flex flex-col items-center justify-center py-16 px-6 text-center">
      {/* Illustration */}
      <div className="mb-6 relative">
        <div className="w-32 h-32 bg-gradient-to-br from-slate-100 to-slate-200 rounded-full flex items-center justify-center">
          <BookOpen className="w-16 h-16 text-slate-400" aria-hidden="true" />
        </div>
        <Sparkles className="w-8 h-8 text-amber-400 absolute -top-2 -right-2" aria-hidden="true" />
      </div>

      {/* Message */}
      <h2 className="text-2xl font-bold text-slate-800 mb-2 font-serif">
        Your journey starts here
      </h2>
      <p className="text-slate-600 mb-6 max-w-md font-sans">
        Every venting session becomes a learning moment. Start your first session to see your growth unfold.
      </p>

      {/* CTA Button */}
      <button
        onClick={onStartVent}
        type="button"
        className="min-h-[44px] px-6 py-3 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-colors flex items-center gap-2 font-sans"
      >
        <Sparkles className="w-5 h-5" aria-hidden="true" />
        <span>Start My First Vent</span>
      </button>
    </div>
  );
}