import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import Card from "../../../../ui/Card";
import CardHeader from "../../../../ui/CardHeader";
import SightingEntryTable from "./SightingEntryTable";
import SightingExitTable from "./SightingExitTable";

const PlatePatch = () => {
  return (
    <Card className="md:row-start-4 md:col-span-2 p-4 h-[190%]">
      <CardHeader title="Entry / Exit" />
      <Tabs>
        <TabList>
          <Tab>Entry Sightings</Tab>
          <Tab>Exit Sightings</Tab>
        </TabList>
        <TabPanel>
          <SightingEntryTable />
        </TabPanel>
        <TabPanel>
          <SightingExitTable />
        </TabPanel>
      </Tabs>
    </Card>
  );
};

export default PlatePatch;
