import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import Icon from "./Icon";
import { cn } from "@/lib/utils";

type ContactInputFieldProps = {
    icon: string;
    label: string;
    value: string;
    type?: string;
    color?: string;
    onChange: (value: string) => void;
};

export default function ContactInputField({ icon, label, value, color, type = "text", onChange }: ContactInputFieldProps) {
    return (
        <div className="flex flex-col md:flex-row md:items-center gap-4 w-full">
            <div className="w-9 h-9 flex items-center justify-center rounded-md bg-muted shrink-0">
                <Icon icon={icon} className={cn("w-6 h-6", color)} />
            </div>

            <Label className="text-sm md:w-32"> {label} </Label>

            <Input
                type={type}
                className="flex-1 md:text-sm"
                value={value}
                onChange={(e) => onChange(e.target.value)}
            />
        </div>
    );
}