import { useState } from 'react';
import cc from 'classcat';

interface TabsProps {
  data: {
    id: string;
    name: string;
    items: {
      id: string;
      name: string;
      description: string;
    }[];
  }[];
  className?: string;
  activeClassName?: string;
}

export const Tabs = ({
  data,
  className,
  activeClassName = 'c-black',
}: TabsProps) => {
  const [tabIndex, setTabIndex] = useState(0);
  const items = data[tabIndex].items;

  return (
    <div className="spacingY4">
      <div className="flex justifyCenter spacing4">
        {data.map((item, i) => {
          if (item.name) {
            const cn = cc([
              'bold c-gray cup truncate',
              className,
              { [activeClassName]: tabIndex === i },
            ]);
            return (
              <div className={cn} onClick={() => setTabIndex(i)} key={i}>
                {item.name}
              </div>
            );
          } else {
            return null;
          }
        })}
      </div>

      <div className="flex spacing4">
        {items.map((item, i) => {
          const borderColor = 'hsl(170deg 52% 59%)';
          if (item.name || item.description) {
            return (
              <div
                className="rounded4 padding4 flexGrow w100 spacingY2 bg-white"
                style={{ border: `1px solid ${borderColor}` }}
                key={i}
              >
                {item.name && <div className="fz16 bold">{item.name}</div>}
                <div className="fz14">{item.description}</div>
              </div>
            );
          } else {
            return null;
          }
        })}
      </div>
    </div>
  );
};