import type { StaticImageData } from "next/image";
import type { ReactNode } from "react";

import clsx from "clsx";
import Image from "next/image";

import { useSelectFilterContext } from "../SelectFilter/SelectFilter";

import Button from "@/components/Button/Button";

import styles from "./Select.module.scss";

export default function Select({
  value,
  image,
  placeholder,
  children,
}: {
  value: string;
  image?: StaticImageData | string;
  placeholder?: string;
  children?: ReactNode;
}) {
  const { name, selectedValues, onSelect } = useSelectFilterContext();

  const isSelected = selectedValues.includes(value);

  function handleClick() {
    onSelect(value);
  }

  return (
    <div
      onClick={handleClick}
      className={clsx(
        styles["select"],
        isSelected && styles["select--selected"],
      )}
    >
      {image && (
        <div className={styles["select__image-wrapper"]}>
          <Image
            src={image}
            alt={name}
            fill
            {...(placeholder && {
              placeholder: "blur",
              blurDataURL: placeholder,
            })}
            className={styles["select__image"]}
          />
        </div>
      )}

      {children && (
        <Button className={styles["select__button"]}>{children}</Button>
      )}
    </div>
  );
}