import React from 'react';

import { Tab } from '@headlessui/react';

export interface CardTabProps {
  title: string;
}

export const CardTab = ({ title }: CardTabProps): JSX.Element => {
  return (
    <Tab
      className={({ selected }) =>
        `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
          selected ? 'bg-secondary shadow-md' : ''
        }`
      }
    >
      {title}
    </Tab>
  );
};