import { FC } from "react"
import { Button, Group, Text } from "@mantine/core"
import { ServiceShortType } from "@/models/landings"

interface ServiceSelectionBlockProps {
  services: ServiceShortType[]
  activeServiceKey: string | undefined
  onSelect: (serviceKey: string) => void
}

const ServiceSelectionBlock: FC<ServiceSelectionBlockProps> = ({
  services,
  activeServiceKey,
  onSelect,
}) => {
  return (
    <Group gap="xs" wrap="wrap">
      {services.map(s => (
        <Button
          key={s.key}
          size="compact-xs"
          variant={s.key === activeServiceKey ? "light" : "default"}
          color={s.key === activeServiceKey ? "blue" : "gray"}
          onClick={() => onSelect(s.key)}
        >
          {s.label}
          <Text span size="xs" c="dimmed" ml={4}>
            · {s.count}
          </Text>
        </Button>
      ))}
    </Group>
  )
}

export default ServiceSelectionBlock