'use client';

import React from 'react';
import { ChevronDown, Inbox } from 'lucide-react';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

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="border-b border-gray-100 bg-white/95">
      <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} emails
        </span>
      </div>
    </div>
  );
} 