'use client';

import React from 'react';
import { ChevronDown } 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;
}

export default function EmailListHeader({
  allSelected,
  someSelected,
  onToggleSelectAll,
}: EmailListHeaderProps) {
  return (
    <div className="flex items-center justify-between border-b px-4 py-2">
      <div className="flex items-center gap-2">
        <Checkbox 
          checked={allSelected}
          ref={(input) => {
            if (input) {
              (input as unknown as HTMLInputElement).indeterminate = someSelected && !allSelected;
            }
          }}
          onClick={onToggleSelectAll}
        />

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
              <ChevronDown className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuItem onClick={onToggleSelectAll}>
              {allSelected ? 'Unselect all' : 'Select all'}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={onToggleSelectAll} disabled={!someSelected}>
              Unselect all
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      
      <div className="text-sm text-muted-foreground">
        Select messages to perform actions
      </div>
    </div>
  );
}