'use client'

import { Icon } from "@iconify/react";
import Link from "next/link";

const sosmeds =  [
  {
    name: 'x',
    url: 'https://x.com/_nomi_nonsz',
    icon: 'pajamas:twitter',
    size: 'text-[28px]'
  },
  {
    name: 'facebook',
    url: 'https://www.facebook.com/nominonsense/',
    icon: 'mdi:facebook'
  },
  {
    name: 'github',
    url: 'https://github.com/nomi-nonsz/',
    icon: 'mdi:github'
  },
  {
    name: 'reddit',
    url: 'https://www.reddit.com/user/_nomi_nonsz',
    icon: 'mdi:reddit'
  },
  {
    name: 'itch',
    url: 'https://nomi-nonsense.itch.io/',
    icon: 'cib:itch-io',
    size: 'text-[30px]'
  },
]

export const Sosmed = () => {
  return (
    <div className="flex justify-center gap-3 mb-10">
      {sosmeds.map((sosmed) => (
        <Link
          className="grid items-center justify-center border border-primary w-[48px] xs:w-[52px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1"
          href={sosmed.url}
          target="_blank"
          key={sosmed.name}
        >
          <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
        </Link>
      ))}
    </div>
  )
}