'use client';

import React from 'react';
import { ChevronDown, Inbox } from 'lucide-react';
import { Checkbox } from '@/components/ui/checkbox';

interface EmailListHeaderProps {
  allSelected: boolean;
  someSelected: boolean;
  onToggleSelectAll: () => void;
  currentFolder?: string;
  totalEmails?: number;
}

export default function EmailListHeader({
  allSelected,
  someSelected,
  onToggleSelectAll,
  currentFolder = 'Inbox',
  totalEmails = 0
}: EmailListHeaderProps) {
  return (
    <div className="flex items-center justify-between px-4 h-14">
      <div className="flex items-center gap-3">
        <Checkbox 
          checked={allSelected}
          ref={(input) => {
            if (input) {
              (input as unknown as HTMLInputElement).indeterminate = someSelected && !allSelected;
            }
          }}
          onCheckedChange={onToggleSelectAll}
          className="mt-0.5"
        />
        <h2 className="text-base font-semibold text-gray-900 capitalize">{currentFolder.toLowerCase()}</h2>
      </div>
      
      <span className="text-sm text-gray-600">
        {totalEmails} {totalEmails === 1 ? 'email' : 'emails'}
      </span>
    </div>
  );
}