import React from 'react';

interface SocialLink {
    name: string;
    icon: string;
    href: string;
}

const Header: React.FC = () => {
    const socialLinks: SocialLink[] = [
        { name: 'Facebook', icon: 'f', href: '#' },
        { name: 'LinkedIn', icon: 'in', href: '#' },
        { name: 'Twitter', icon: 'tw', href: '#' },
        { name: 'Instagram', icon: 'ig', href: '#' },
    ];

    return (
        <header className="relative z-50 hidden flex-col items-center justify-between gap-4 px-5 py-5 md:flex-row md:px-10 lg:px-20 md:flex">
            <div className="flex flex-col gap-4 text-xs text-gray-300 md:flex-row md:gap-8 md:text-[13px]">
        <span className="flex items-center gap-2">
            <span className="h-5 w-5 rounded-full bg-white"></span>
            info@marsms.com
        </span>
                <span className="flex items-center gap-2">
            <span className="h-5 w-5 rounded-full bg-white"></span>
            İstanbul Türkiye
        </span>
            </div>

            <div className="flex items-center gap-2 text-xs text-gray-300 md:text-[13px]">
                <span>Bizi Takip Edin :</span>
                {socialLinks.map((social, index) => (
                    <a
                        key={index}
                        href={social.href}
                        className="flex h-7 w-7 items-center justify-center rounded-full bg-white/10 text-white transition-all duration-300 hover:bg-[#ff6b35] md:h-8 md:w-8"
                        aria-label={social.name}
                    >
                        {social.icon}
                    </a>
                ))}
            </div>
        </header>

    );
};

export default Header;