import { Box, Button, Text, VStack, Icon, useColorMode } from "@chakra-ui/react";
import { FaPlus, FaUsers } from "react-icons/fa";
import { useTranslation } from 'react-i18next';

interface EmptyStateProps {
  onAddData: () => void;
}

const EmptyState = ({ onAddData }: EmptyStateProps) => {
  const { colorMode } = useColorMode();
  const { t } = useTranslation();

  return (
    <Box 
      p={8} 
      borderRadius="lg" 
      boxShadow="md"
      bg={colorMode === 'dark' ? 'gray.700' : 'white'}
      textAlign="center"
    >
      <VStack spacing={4}>
        <Icon as={FaUsers} boxSize={12} color={colorMode === 'dark' ? 'blue.300' : 'blue.500'} />
        <Text fontSize="xl" fontWeight="bold">
          {t('journal.pl.attendance.emptyState.title')}
        </Text>
        <Text color={colorMode === 'dark' ? 'gray.400' : 'gray.600'}>
          {t('journal.pl.attendance.emptyState.description')}
        </Text>
        <Button 
          leftIcon={<FaPlus />} 
          colorScheme="blue" 
          onClick={onAddData}
          mt={2}
        >
          {t('journal.pl.common.add')}
        </Button>
      </VStack>
    </Box>
  );
};

export default EmptyState;