import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

interface PaymentMethod {
    name: string;
    channels: {
        [code: string]: string;
    };
}

interface PaymentMethods {
    [group: string]: PaymentMethod;
}

interface PaymentMethodSelectorProps {
    value: string;
    onValueChange: (value: string) => void;
    paymentMethods: PaymentMethods;
}

export const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
    value,
    onValueChange,
    paymentMethods,
}) => {
    return (
        <div className="space-y-2">
            <Label htmlFor="payment_method">Payment Method</Label>
            <Select value={value} onValueChange={onValueChange}>
                <SelectTrigger id="payment_method">
                    <SelectValue placeholder="Select payment method..." />
                </SelectTrigger>
                <SelectContent>
                    {Object.entries(paymentMethods).map(([groupKey, group]) => (
                        <SelectGroup key={groupKey}>
                            <SelectLabel>{group.name}</SelectLabel>
                            {Object.entries(group.channels).map(([code, channelName]) => (
                                <SelectItem key={code} value={code}>
                                    {channelName}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
};