import { Button, Text } from "@gluestack-ui/themed";
import { ComponentProps } from "react"

type Props = ComponentProps<typeof Button> & {
  name: string,
  isActive: boolean,
}

export function Group({ name, isActive, ...others }: Props) {
  return (
    <Button
      minWidth="$24"
      h="$10"
      bg="$gray600"
      rounded="$md"
      justifyContent="center"
      alignItems="center"
      borderColor="$green500"
      borderWidth={isActive ? 1 : 0}
      sx={{
        ":active": {
          borderWidth: 1,
        }
      }}
      mr="$3"
      {...others}
    >
      <Text
        color={isActive ? "$green500" : "$gray200"}
        fontSize="$xs"
        textTransform="uppercase"
        fontFamily="$heading"
      >
        {name}
      </Text>
    </Button>
  )
}
