"use client"

import { Checkbox as AriaCheckbox } from "react-aria-components"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import Body from "@/components/TempDesignSystem/Text/Body"

import styles from "./checkbox.module.css"

interface CheckboxProps {
  name: string
  value: string
  isSelected: boolean
  onChange: (filterId: string) => void
}

export default function Checkbox({
  isSelected,
  name,
  value,
  onChange,
}: CheckboxProps) {
  return (
    <AriaCheckbox
      className={styles.checkboxWrapper}
      isSelected={isSelected}
      onChange={() => onChange(value)}
    >
      {({ isSelected }) => (
        <>
          <span className={styles.checkbox}>
            {isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />}
          </span>
          <Body asChild>
            <span>{name}</span>
          </Body>
        </>
      )}
    </AriaCheckbox>
  )
}
