import { CalendarDays, Edit2, Save, Sparkles, RefreshCw } from 'lucide-react';

export interface PlanHeaderProps {
  planDate: string;
  isEditing: boolean;
  generating: boolean;
  onEdit: () => void;
  onSave: () => void;
  onGenerateAI: () => void;
  onReset: () => void;
}

export function PlanHeader({
  planDate,
  isEditing,
  generating,
  onEdit,
  onSave,
  onGenerateAI,
  onReset,
}: PlanHeaderProps): JSX.Element {
  return (
    <div className="flex flex-wrap items-center justify-between gap-4">
      <div className="flex items-center gap-3">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500/20 text-blue-400">
          <CalendarDays className="h-6 w-6" aria-hidden="true" />
        </div>
        <div>
          <h3 className="text-lg font-semibold text-white">Daily Trading Plan</h3>
          <p className="text-sm text-slate-400">{planDate}</p>
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        <button
          onClick={onGenerateAI}
          disabled={generating}
          className="inline-flex items-center gap-2 rounded-lg border border-purple-500/50 bg-purple-500/10 px-4 py-2 text-sm font-medium text-purple-300 hover:bg-purple-500/20 disabled:cursor-not-allowed disabled:opacity-50 transition-colors"
          aria-label="Generate AI plan"
        >
          <Sparkles className="h-4 w-4" aria-hidden="true" />
          {generating ? 'Generating...' : 'AI Plan'}
        </button>

        <button
          onClick={onReset}
          disabled={generating}
          className="inline-flex items-center gap-2 rounded-lg border border-slate-600 bg-slate-800 px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50 transition-colors"
          aria-label="Reset plan"
        >
          <RefreshCw className="h-4 w-4" aria-hidden="true" />
          Reset
        </button>

        {isEditing ? (
          <button
            onClick={onSave}
            className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 transition-colors"
            aria-label="Save changes"
          >
            <Save className="h-4 w-4" aria-hidden="true" />
            Save
          </button>
        ) : (
          <button
            onClick={onEdit}
            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
            aria-label="Edit plan"
          >
            <Edit2 className="h-4 w-4" aria-hidden="true" />
            Edit
          </button>
        )}
      </div>
    </div>
  );
}
