/*
 * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
 *
 * SPDX-License-Identifier: MIT
 */

import { useId } from 'react';
import {
  siCreativecommons,
  siDblp,
  siGithub,
  siGooglescholar,
  siLinkedin,
  siOrcid,
  siScopus,
} from 'simple-icons';

import fediverse from './icons/fediverse';
import mtmt from './icons/mtmt';

export interface IconProps {
  hidden?: boolean;
  className?: string;
  alt?: string;
}

export function Icon({
  path,
  alt,
  hidden,
  className,
}: IconProps & {
  path: string;
}) {
  const titleId = useId();

  return (
    <>
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        role="img"
        {...(hidden ? { 'aria-hidden': true } : { 'aria-labelledby': titleId })}
        viewBox="0 0 24 24"
        width="24"
        height="24"
        {...(className ? { className } : {})}
      >
        <path fill="currentColor" d={path} />
      </svg>
      {!hidden && (
        <span className="sr-only" id={titleId}>
          {alt}
        </span>
      )}
    </>
  );
}

export interface SimpleIcon {
  path: string;
  title: string;
}

export function SimpleIcon({
  icon: { path, title },
  ...props
}: IconProps & {
  icon: SimpleIcon;
}) {
  return <Icon path={path} {...{ ...props, alt: props.alt ?? title }} />;
}

function makeSimpleIcon(icon: SimpleIcon): (props: IconProps) => JSX.Element {
  return (props) => <SimpleIcon icon={icon} {...props} />;
}

export const CreativeCommonsIcon = makeSimpleIcon(siCreativecommons);

export const DBLPIcon = makeSimpleIcon(siDblp);

export const FediverseIcon = makeSimpleIcon(fediverse);

export const GithubIcon = makeSimpleIcon(siGithub);

export const GoogleScholarIcon = makeSimpleIcon(siGooglescholar);

export const LinkedInIcon = makeSimpleIcon(siLinkedin);

export const MTMTIcon = makeSimpleIcon(mtmt);

export const OrcidIcon = makeSimpleIcon(siOrcid);

export const ScopusIcon = makeSimpleIcon(siScopus);