'use client';

import { useState, useEffect } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Company } from '@/lib/types/autotask';
import { useApi } from '@/lib/hooks/use-api';
import { Building2 } from 'lucide-react';

interface CompanySelectorProps {
  value?: number;
  onValueChange: (value: number) => void;
  label?: string;
}

export function CompanySelector({ 
  value, 
  onValueChange, 
  label = 'Select Company' 
}: CompanySelectorProps) {
  const { data, loading, error } = useApi<{ companies: Company[] }>('/api/companies');

  const companies = data?.companies || [];

  return (
    <div className="space-y-2">
      <Label htmlFor="company-select" className="flex items-center gap-2">
        <Building2 className="w-4 h-4" />
        {label}
      </Label>
      <Select
        value={value?.toString()}
        onValueChange={(val) => onValueChange(parseInt(val))}
        disabled={loading || !!error}
      >
        <SelectTrigger id="company-select">
          <SelectValue placeholder={loading ? 'Loading...' : 'Select a company'} />
        </SelectTrigger>
        <SelectContent>
          {companies.map((company) => (
            <SelectItem key={company.id} value={company.id.toString()}>
              {company.companyName}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {error && (
        <p className="text-sm text-red-500">
          Error loading companies: {error}
        </p>
      )}
    </div>
  );
}