import { Tabs, Input } from "mogora-ui";

export default function TabsDemo() {
  return (
    <Tabs variant={"default"} defaultValue="item-1" className="flex flex-col w-lg">
      <Tabs.List className="grid grid-cols-2">
        <Tabs.Trigger value="item-1">Item 1</Tabs.Trigger>
        <Tabs.Trigger value="item-2">Item 2</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="item-1" >
        <Card className="w-full p-3 flex flex-col gap-2">
          <h1 className="text-start font-bold w-full">Item 1</h1>
          <p className="text-sm leading-4 font-medium text-slate-500">
            Make changes to your account here. Click save when you're done.
          </p>D
          <Input className="focus:ring-slate-500" theme={"info"} placeholder="Email"/>
          <Input className="focus:ring-slate-500" theme={"info"} placeholder="Username"/>
        </Card>
      </Tabs.Content>
      <Tabs.Content value="item-2">
        <Card className="w-full p-3 flex flex-col gap-2">
          <h1 className="text-start font-bold w-full">Item 2</h1>
          <p className="text-sm leading-4 font-medium text-slate-500">
            Make changes to your account here. Click save when you're done.
          </p>
          <Input className="focus:ring-slate-500" theme={"info"} placeholder="Password"/>
          <Input className="focus:ring-slate-500" theme={"info"} placeholder="Confirm"/>
        </Card>
      </Tabs.Content>
    </Tabs>
  )
}