import React, { Button, Typography, Box } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { clearSearch } from '../actions/searchActions';

const EmptyState: React.FC = () => {
  const dispatch = useDispatch();
  const searchQuery = useSelector((state: any) => state.search.query);

  const handleClearSearch = () => {
    dispatch(clearSearch());
  };

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        padding: 4,
      }}
    >
      <Typography variant="h4" gutterBottom>
        No results found
      </Typography>
      <Typography variant="body1" color="text.secondary" gutterBottom>
        {searchQuery
          ? `We couldn't find any records matching "${searchQuery}". Try adjusting your search terms or clear the filter to see all records.`
          : 'There are no records to display. Clear the search to load the default list.'}
      </Typography>
      <Button
        variant="contained"
        color="primary"
        onClick={handleClearSearch}
        sx={{ mt: 2 }}
      >
        Clear search
      </Button>
    </Box>
  );
};

export default EmptyState;