import React from "react";
import { Some } from "../utils/Some";
import { generateReactElements } from "../Components/index";

type Props = {
  readonly className: string;
  readonly href: string;
  readonly role: string;
  readonly dataSlide: any;
  readonly data: any;
  readonly content: any;
  readonly onClick?: () => void;
};

export const Anchor = ({ className, href, role, dataSlide, data, content, onClick }: Props) => {
  if (Some(onClick)) {
    return (
      <a className={className} href={href} role={role} data-slide={dataSlide} onClick={onClick}>
        {data?.map((child: any, index: number) => (
          <React.Fragment key={index}>{generateReactElements(child, content)}</React.Fragment>
        ))}
      </a>
    );
  }

  return (
    <a className={className} href={href} role={role} data-slide={dataSlide}>
      {data?.map((child: any, index: number) => (
        <React.Fragment key={index}>{generateReactElements(child, content)}</React.Fragment>
      ))}
    </a>
  );
};