"use client";

import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

type Props = {
  id?: string;
  value: string[];
  onChange: (value: string[]) => void;
  className?: string;
};

function parseIsinList(raw: string) {
  return raw
    .split(/[\n,]+/)
    .map((item) => item.trim())
    .filter(Boolean);
}

export function IsinMultiSelect({ id, value, onChange, className }: Props) {
  return (
    <Textarea
      id={id}
      className={cn("font-mono text-sm", className)}
      rows={4}
      placeholder="Enter ISINs separated by commas or new lines"
      value={value.join("\n")}
      onChange={(event) => onChange(parseIsinList(event.target.value))}
    />
  );
}