import * as stylex from "@stylexjs/stylex";

import { Tab, TabList, TabPanel, Tabs } from "@/components/tabs";

const styles = stylex.create({
  root: {
    width: "100%",
  },
});

export function Basic() {
  return (
    <Tabs style={styles.root}>
      <TabList aria-label="History of Ancient Rome">
        <Tab id="FoR">Founding of Rome</Tab>
        <Tab id="MaR">Monarchy and Republic</Tab>
        <Tab id="Emp">Empire</Tab>
      </TabList>
      <TabPanel id="FoR">
        Arma virumque cano, Troiae qui primus ab oris.
      </TabPanel>
      <TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel>
      <TabPanel id="Emp">Alea jacta est.</TabPanel>
    </Tabs>
  );
}