'use client';

import { cn } from '@/lib/utils';
import { Chip } from '@/components/ui/chip';
import React from 'react';

type TagListSelectProps = {
  options: { label: string; value: string | number }[];
  value: (string | number)[];
  onChange: (values: (string | number)[]) => void;
  chipProps?: React.ComponentProps<typeof Chip>;
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;

export const TagListSelect = (props: TagListSelectProps) => {
  const { options, value = [], onChange, chipProps, ...rest } = props;

  const handleSelect = (id: string | number) => {
    if (value.includes(id)) {
      onChange(value.filter((v: string | number) => v !== id));
    } else {
      onChange([...value, id]);
    }
  };

  return (
    <div {...rest} className={cn('flex flex-wrap gap-2', rest.className)}>
      {options.map((option) => (
        <Chip
          key={option.value}
          size="small"
          {...chipProps}
          className={cn('px-4', chipProps?.className)}
          state={value.includes(option.value) ? 'active' : 'inactive'}
          onClick={() => handleSelect(option.value)}
        >
          {option.label}
        </Chip>
      ))}
    </div>
  );
};
