auditly/components/figma/FigmaInput.tsx

import React from 'react';

interface FigmaInputProps {
    label?: string;
    placeholder?: string;
    type?: string;
    value?: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    icon?: React.ReactNode;
    buttonText?: string;
    onButtonClick?: () => void;
    className?: string;
    required?: boolean;
    showLabel?: boolean;
}

export const FigmaInput: React.FC<FigmaInputProps> = ({
    label = 'Email',
    placeholder = 'Enter your email',
    type = 'text',
    value,
    onChange,
    icon,
    buttonText,
    onButtonClick,
    className = '',
    required = false,
    showLabel = true
}) => {
    return (
        <div className={`self-stretch flex flex-col justify-start items-start gap-2 ${className}`}>
            {showLabel && label && (
                <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                    <div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">
                        {label}
                    </div>
                    {required && (
                        <div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
                    )}
                </div>
            )}

            <div className="self-stretch flex flex-col justify-start items-start gap-1">
                <div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
                    {icon && (
                        <div data-svg-wrapper className="relative">
                            {icon}
                        </div>
                    )}
                    <input
                        type={type}
                        value={value}
                        onChange={onChange}
                        placeholder={placeholder}
                        className="flex-1 justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight bg-transparent border-none outline-none placeholder:text-Neutrals-NeutralSlate500"
                    />
                </div>
            </div>

            {buttonText && (
                <button
                    onClick={onButtonClick}
                    className="w-32 max-w-32 px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
                >
                    <div className="justify-center text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">
                        {buttonText}
                    </div>
                </button>
            )}
        </div>
    );
};

// Select component for dropdowns
interface FigmaSelectProps {
    label?: string;
    value?: string;
    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    options: { value: string; label: string }[];
    className?: string;
    required?: boolean;
    placeholder?: string;
}

export const FigmaSelect: React.FC<FigmaSelectProps> = ({
    label,
    value,
    onChange,
    options,
    className = '',
    required = false,
    placeholder = 'Select option'
}) => {
    return (
        <div className={`self-stretch flex flex-col justify-start items-start gap-2 ${className}`}>
            {label && (
                <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                    <div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">
                        {label}
                    </div>
                    {required && (
                        <div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
                    )}
                </div>
            )}

            <div className="self-stretch flex flex-col justify-start items-start gap-1">
                <div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
                    <select
                        value={value}
                        onChange={onChange}
                        className="flex-1 justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight bg-transparent border-none outline-none appearance-none"
                    >
                        <option value="" className="text-Neutrals-NeutralSlate500">{placeholder}</option>
                        {options.map((option, index) => (
                            <option key={index} value={option.value}>
                                {option.label}
                            </option>
                        ))}
                    </select>
                    {/* Custom dropdown arrow */}
                    <div className="pointer-events-none">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4 6L8 10L12 6" stroke="var(--Neutrals-NeutralSlate500)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    );
};

// Email icon component for convenience
export const EmailIcon: React.FC = () => (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1.66675 5.83325L8.47085 10.5961C9.02182 10.9818 9.29731 11.1746 9.59697 11.2493C9.86166 11.3153 10.1385 11.3153 10.4032 11.2493C10.7029 11.1746 10.9783 10.9818 11.5293 10.5961L18.3334 5.83325M5.66675 16.6666H14.3334C15.7335 16.6666 16.4336 16.6666 16.9684 16.3941C17.4388 16.1544 17.8212 15.772 18.0609 15.3016C18.3334 14.7668 18.3334 14.0667 18.3334 12.6666V7.33325C18.3334 5.93312 18.3334 5.23306 18.0609 4.69828C17.8212 4.22787 17.4388 3.84542 16.9684 3.60574C16.4336 3.33325 15.7335 3.33325 14.3334 3.33325H5.66675C4.26662 3.33325 3.56655 3.33325 3.03177 3.60574C2.56137 3.84542 2.17892 4.22787 1.93923 4.69828C1.66675 5.23306 1.66675 5.93312 1.66675 7.33325V12.6666C1.66675 14.0667 1.66675 14.7668 1.93923 15.3016C2.17892 15.772 2.56137 16.1544 3.03177 16.3941C3.56655 16.6666 4.26662 16.6666 5.66675 16.6666Z" stroke="var(--Neutrals-NeutralSlate500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
);

export default FigmaInput;