src/components/base/Select/SelectItem.tsx

'use client';

import { cn } from '@/utils/Helpers';
import * as React from 'react';
import { SelectContext } from './SelectContext';

export default function SelectItem({
  children,
  value,
  className,
}: {
  children: React.ReactNode;
  value: string;
  className?: string;
}) {
  const context = React.useContext(SelectContext);
  if (!context) {
    throw new Error('SelectItem must be used within Select');
  }

  const isSelected = context.value === value;

  return (
    <button
      type="button"
      onClick={() => {
        context.onChange(value);
        context.setOpen(false);
      }}
      className={cn(
        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
        isSelected && 'bg-accent text-accent-foreground',
        className,
      )}
    >
      {children}
    </button>
  );
}