import React from 'react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';

interface FilePickerProps {
  label?: string;
  description?: string;
  accept?: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  disabled?: boolean;
}

export function FilePicker({ label, description, accept, onChange, disabled }: FilePickerProps) {
  return (
    <Stack gap={2}>
      {label && (
        <Text as="label" size="sm" weight="medium" color="text-gray-400">
          {label}
        </Text>
      )}
      {description && (
        <Text size="xs" color="text-gray-500">
          {description}
        </Text>
      )}
      <Box
        as="input"
        type="file"
        accept={accept}
        onChange={onChange}
        disabled={disabled}
        display="block"
        fullWidth
        size="sm"
        color="text-gray-400"
        className="file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-blue file:text-white file:cursor-pointer file:transition-colors hover:file:bg-primary-blue/80 disabled:file:opacity-50 disabled:file:cursor-not-allowed"
      />
    </Stack>
  );
}