"use client"

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

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

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

import type { FilterCheckboxProps } from "@/types/components/hotelReservation/selectHotel/filterCheckbox"

export default function FilterCheckbox({
  isSelected,
  name,
  id,
  isDisabled,
  onChange,
}: FilterCheckboxProps) {
  return (
    <AriaCheckbox
      className={styles.container}
      isSelected={isSelected}
      onChange={() => onChange(id)}
      isDisabled={isDisabled}
    >
      {({ isSelected }) => (
        <>
          <span className={styles.checkboxContainer}>
            <span className={styles.checkbox}>
              {isSelected && (
                <MaterialIcon icon="check" color="Icon/Inverted" />
              )}
            </span>
            <Typography variant="Body/Paragraph/mdRegular">
              <span>{name}</span>
            </Typography>
          </span>
        </>
      )}
    </AriaCheckbox>
  )
}
