/* eslint-disable -- temporary disable for development/testing purposes */

import * as React from 'react';
import { Box, List, ListItemButton, ListItemText } from '@mui/material';

interface Company {
  id: number;
  name: string;
  active: boolean;
}

interface CompanyDropdownProps {
  companies: Company[];
  defaultCompany?: Company;
  onSelect: (company: Company) => void;
}

export default function CompanyDropdown({
  companies,
  defaultCompany,
  onSelect,
}: CompanyDropdownProps) {
  return (
    <Box
      sx={{
        backgroundColor: '#111621', // black background
        color: '#fff',            // white text
        borderRadius: 1,
        overflow: 'hidden',
      }}
    >
      <List>
        {companies.map((company) => (
          <ListItemButton
            key={company.id}
            selected={defaultCompany?.id === company.id}
            // onClick={() => onSelect(company)}
            onClick={() => {
              onSelect(company);
            }}
            sx={{
              '&.Mui-selected': {
                backgroundColor: '#222', // slightly lighter for selected
              },
              '&:hover': {
                backgroundColor: '#333',
              },
              color: '#fff',
            }}
          >
            <ListItemText primary={company.name} />
          </ListItemButton>
        ))}
      </List>
    </Box>
  );
}