'use client'

import { ReactNode } from 'react'
import { Button } from '../ui/button'
import { ArrowLeft, Save, Eye, Send } from 'lucide-react'
import { SaveStatusIndicator } from './save-status-indicator'

interface ComposeHeaderProps {
  title: string
  saving: boolean
  lastSavedLabel: string | null
  hasUnsavedChanges: boolean
  canSend: boolean
  onBack: () => void
  onSave: () => void
  onPreview: () => void
  onSend: () => void
  extraActions?: ReactNode
}

export function ComposeHeader({
  title,
  saving,
  lastSavedLabel,
  hasUnsavedChanges,
  canSend,
  onBack,
  onSave,
  onPreview,
  onSend,
  extraActions,
}: ComposeHeaderProps) {
  return (
    <div className="flex items-center justify-between px-4 py-2 border-b bg-background">
      <div className="flex items-center gap-3 min-w-0">
        <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onBack}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <span className="text-sm font-medium truncate">{title}</span>
        <SaveStatusIndicator
          saving={saving}
          lastSavedLabel={lastSavedLabel}
          hasUnsavedChanges={hasUnsavedChanges}
        />
      </div>
      <div className="flex items-center gap-2 shrink-0">
        <Button
          variant="outline"
          size="sm"
          onClick={onSave}
          disabled={saving}
        >
          <Save className="mr-1.5 h-3.5 w-3.5" />
          Save
        </Button>
        <Button variant="outline" size="sm" onClick={onPreview}>
          <Eye className="mr-1.5 h-3.5 w-3.5" />
          Preview
        </Button>
        {extraActions}
        <Button
          size="sm"
          disabled={!canSend}
          onClick={onSend}
        >
          <Send className="mr-1.5 h-3.5 w-3.5" />
          Send
        </Button>
      </div>
    </div>
  )
}