import { Flex, Icon, Text } from "@chakra-ui/react";

export default function SidebarItem({
  icon,
  label,
  active = false,
  setFilters,
  name,
}) {
  return (
    <Flex
      align="center"
      gap={3}
      px={4}
      py={3}
      borderRadius="lg"
      cursor="pointer"
      bg={active ? "purple.50" : "transparent"}
      color={active ? "purple.600" : "gray.700"}
      _hover={{
        bg: "purple.50",
        color: "purple.600",
      }}
      transition="all 0.2s"
      onClick={(e) => setFilters({ tab_menu: name })}
    >
      <Icon as={icon} boxSize={5} />
      <Text fontSize="md" fontWeight="medium">
        {label}
      </Text>
    </Flex>
  );
}