import { FindSocials } from 'types/graphql'

import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'

const SocialLinks = ({ socials }: FindSocials) => (
  <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
    {[...socials]
      .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))
      .map((social, i) => (
        <div key={i} className="tooltip" data-tip={social.name}>
          <a
            className="btn btn-square"
            href={`${baseUrls[social.type]}${social.username}`}
            target="_blank"
            rel="noreferrer"
          >
            {getLogoComponent(social.type)}
          </a>
        </div>
      ))}
  </div>
)

export default SocialLinks