"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";

type Props = React.InputHTMLAttributes<HTMLInputElement> & {
  id?: string;
  invalid?: boolean;
  currency?: string;
};

export function CurrencyInput({ id, invalid, currency = "USD", placeholder, ...props }: Props) {
  return (
    <InputGroup className="h-9">
      <InputGroupAddon className="border-r bg-muted/40 px-2.5">
        <InputGroupText className="text-muted-foreground text-xs">{currency}</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput
        id={id}
        type="number"
        step="0.01"
        inputMode="decimal"
        placeholder={placeholder ?? "0.00"}
        aria-invalid={invalid}
        {...props}
      />
    </InputGroup>
  );
}