'use client'

import { Icon } from "@iconify/react";
import Link from "next/link";
import { FloatingLabel } from "./floating-label";

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: 'gitea',
    url: 'https://gitea.nonszy.space/',
    icon: 'cib:gitea'
  },
]

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