import React, { useEffect, useState } from 'react';
import { Badge } from "@atoms/Badge/Badge";
import Button from '@atoms/Button/Button';
import countries from "flag-icons/country.json" assert { type: "json" };
import "./CountryButton.scss"

interface CountryButtonProps {
    countryCode: string;
    badge: string;
    subtle?: boolean;
    badgeVariant?: string;
    buttonVariant?: string;
    buttonPresentation?: 'normal' | 'outline' | 'subtle';
    href?: string;
    onClick?: () => void;
}
const CountryButton = (
    {
        countryCode,
        badge,
        subtle = false,
        badgeVariant = "primary",
        buttonVariant = "outline-primary",
        buttonPresentation = "normal",
        href,
        onClick
    }: CountryButtonProps) => {

    const [country, setCountry] = useState<any>([]);

    useEffect(() => {
        setCountry(countries.find((country: any) => country.code === countryCode.toLowerCase()));
    }, []);

    return (
        badge ? (
            <Badge badge={badge} onClick={onClick} subtle={subtle} bg={badgeVariant}>
                <Button variant={buttonVariant} presentation={buttonPresentation} className="d-flex flex-column align-items-center w-100 country-button" href={href} onClick={onClick}>
                    <span className={`fi fib fi-${countryCode.toLowerCase()}`} style={{ width: 120, height: 60 }} ></span>
                    {country?.name ? <div>{country.name}</div> : ''}
                </Button>
            </Badge>
        ) : (
            <Button variant={buttonVariant} presentation={buttonPresentation} className="d-flex flex-column align-items-center w-100 country-button" href={href} onClick={onClick}>
                <span className={`fi fib fi-${countryCode.toLowerCase()}`} style={{ width: 120, height: 60 }} ></span>
                {country?.name ? <div>{country.name}</div> : ''}
            </Button>
        )
    );
};

export { CountryButton, CountryButtonProps };