Phone Input

'use client';

import { cn } from '@kit/shared';
import { PhoneInputRoot, PhoneInputBase, PhoneInputFlagMenu } from '@kit/ui/phone-input';
import React, { useCallback, useState } from 'react';

export function PhoneInputDemo() {
    const [value, setValue] = useState('');

    const handleChange = useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) => {
            setValue(e.target.value);
        },
        [setValue]
    );

    return (
        <PhoneInputRoot value={value || ''} onPhoneInputChange={handleChange}>
            <PhoneInputFlagMenu className="bg-muted/50 focus-visible:bg-background" />
            <PhoneInputBase className={cn('max-w-md', value ? 'bg-muted/50 focus-visible:bg-background' : '')} />
        </PhoneInputRoot>
    );
}