import React from "react";

import "./styles.scss";

interface ITabsProps<T> {
  tabs: { label: string; id: T }[];
  selectedTabId: T;
  selectTab: (id: T) => void;
  className?: string;
}

const Tabs = <T extends unknown>(props: ITabsProps<T>) => {
  const { tabs, selectedTabId, selectTab, className } = props;

  const selectTabHandler = (id: T) => () => {
    selectTab(id);
  };

  return (
    <div className={`c-tabs ${className}`}>
      {tabs.map(({ label, id }) => (
        <div
          key={`${id}`}
          className={`c-tabs__tab ${selectedTabId === id ? "c-tabs__tab--selected" : ""}`}
          onClick={selectTabHandler(id)}
        >
          {label}
        </div>
      ))}
    </div>
  );
};

export { Tabs };
