import { DiscordIcon, GiteaIcon, GithubIcon, LinkedInIcon } from './Icons.tsx';

export const Accounts = () => {
    return <div className="flex flex-col gap-4 md:flex-row">
        <a href='https://discord.com/users/821421438719492136' className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1 '>
            <div className="flex flex-row gap-4 h-full">
                <div className="flex flex-col justify-center">
                    <DiscordIcon />
                </div>

                <div className="flex flex-col justify-center">
                    <p className='font-bold'>Discord</p>
                </div>
            </div>
        </a>
        <a href='https://github.com/alekswilc' className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
            <div className="flex flex-row gap-4 h-full">
                <div className="flex flex-col justify-center">
                    <GithubIcon />
                </div>
                <div className="flex flex-col justify-center">
                    <p className='font-bold'>Github</p>
                </div>
            </div>
        </a>
        <a href='https://git.alekswilc.dev/alekswilc/' className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
            <div className="flex flex-row gap-4 h-full">
                <div className="flex flex-col justify-center">
                    <GiteaIcon />
                </div>
                <div className="flex flex-col justify-center">
                    <p className='font-bold'>Gitea</p>
                </div>
            </div>
        </a>
        <a href='https://linkedin.com/in/alekswilc/' className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
            <div className="flex flex-row gap-4">
                <div className="flex flex-col justify-center">
                    <LinkedInIcon />
                </div>
                <div className="flex flex-col justify-center">
                    <p className='font-bold'>LinkedIn</p>
                </div>
            </div>
        </a>
    </div>;
}