import { useState } from "react";
import classNames from "classnames";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faShapes, faAnglesRight } from "@fortawesome/free-solid-svg-icons";
import { FormattedMessage } from "react-intl";

const TABS_ELEMENTS = [
  {
    icon: faShapes,
    name: "badgeEditor.tabs.main",
  },
  {
    icon: faAnglesRight,
    name: "badgeEditor.tabs.advanced",
  },
];

export const EditorTabs = ({
  current,
  onChange,
}: {
  current: number;
  onChange: (e: number) => void;
}) => {
  return (
    // p-2 lg:p-4
    <div className="bg-dark-600 rounded-t-2xl">
      <ul className="w-full relative z-1 grid grid-cols-2">
        {TABS_ELEMENTS.map((tab, index) => (
          <li
            key={index}
            className={classNames(
              "hover:bg-blue hover:bg-opacity-50 flex items-center gap-5 lg:gap-4 cursor-pointer text-white text-left text-xs lg:text-sm font-semibold tracking-wide p-4 lg:p-5 justify-center uppercase",
              {
                "bg-dark-500 hover:!bg-dark-500 hover:!bg-opacity-100":
                  current === index,
                "first-step rounded-t-2xl rounded-r-none": index === 0,
                "second-step rounded-t-2xl rounded-l-none": index === 1,
              }
            )}
            onClick={() => onChange(index)}
          >
            <FontAwesomeIcon icon={tab.icon} className="w-4 min-w-[1rem]" />
            <p>
              <FormattedMessage id={tab.name} />
            </p>
          </li>
        ))}
      </ul>
    </div>
  );
};