import { Hash } from 'lucide-react';

type ChannelAccountIdFieldProps = {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  helpText?: string;
  disabled?: boolean;
};

export default function ChannelAccountIdField({
  label,
  value,
  onChange,
  placeholder,
  helpText,
  disabled,
}: ChannelAccountIdFieldProps) {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2 text-[13px] font-medium text-foreground/80">
        <Hash className="h-3.5 w-3.5 text-foreground/55" />
        <span>{label}</span>
      </div>

      <input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        disabled={disabled}
        autoComplete="off"
        className="h-[44px] w-full rounded-[14px] border border-black/10 bg-white px-3 text-[13px] text-foreground outline-none transition-colors placeholder:text-foreground/35 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#101013] dark:text-gray-100"
      />

      {helpText ? (
        <div className="text-[12px] leading-[18px] text-foreground/55 dark:text-gray-500">{helpText}</div>
      ) : null}
    </div>
  );
}