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="p-4 w-full max-h-[600px] flex flex-col md:w-[95%]">
      <CardHeader title="Entry / Exit" />
      <Tabs defaultIndex={1} className="flex-1 flex flex-col">
        <TabList>
          <Tab>Entry Sightings</Tab>
          <Tab>Exit Sightings</Tab>
        </TabList>
        <TabPanel>
          <SightingEntryTable />
        </TabPanel>
        <TabPanel>
          <SightingExitTable />
        </TabPanel>
      </Tabs>
    </Card>
  );
};

export default PlatePatch;