import { Input, Label, TextArea, TextField } from '@heroui/react';
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';

interface FieldProps {
    label: string;
    value: string | number;
    onChange: (value: string) => void;
    type?: string;
    required?: boolean;
    multiline?: boolean;
    placeholder?: string;
    isLink?: boolean;
    min?: number;
    disabled?: boolean;
}

export function Field({ label, value, onChange, type = 'text', required, multiline, placeholder, isLink, min, disabled }: FieldProps) {
    return (
        <TextField
            value={String(value ?? '')}
            onChange={onChange}
            type={multiline ? undefined : type}
            isRequired={required}
            isDisabled={disabled}
            fullWidth
            className="flex flex-col gap-1.5"
        >
            <Label>{label}</Label>
            {multiline ? (
                <TextArea placeholder={placeholder} rows={3} fullWidth />
            ) : isLink ? (
                <div className="relative">
                    <Input placeholder={placeholder} fullWidth className={value ? 'pr-9' : undefined} />
                    {value && (
                        <a
                            href={String(value)}
                            target="_blank"
                            rel="noreferrer"
                            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-sky-600"
                            aria-label="Buka link"
                        >
                            <ArrowTopRightOnSquareIcon className="w-4 h-4" />
                        </a>
                    )}
                </div>
            ) : (
                <Input placeholder={placeholder} fullWidth min={min} />
            )}
        </TextField>
    );
}