export const TabsExample: React.FC = () => {
  const [selectedTab, setSelectedTab] = React.useState(1);

  const handleTabClick = React.useCallback(
    (identifier: number) => {
      setSelectedTab(identifier);
    },
    [setSelectedTab]
  );

  return (
    <UiCard noPadding>
      <UiTabs rounded>
        <UiTabItem<number> selected={selectedTab === 1} identifier={1} handleClick={handleTabClick}>
          <UiText>Fruits</UiText>
        </UiTabItem>
        <UiTabItem<number> selected={selectedTab === 2} identifier={2} handleClick={handleTabClick}>
          <UiText>Vegetables</UiText>
        </UiTabItem>
        <UiTabItem<number> selected={selectedTab === 3} identifier={3} handleClick={handleTabClick}>
          <UiText>Meats</UiText>
        </UiTabItem>
      </UiTabs>
      {selectedTab === 1 && <Fruits />}
      {selectedTab === 2 && <Veggies />}
      {selectedTab === 3 && <Meats />}
    </UiCard>
  );
};