import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";

export default function TabsDemo() {
  return (
    <div className="flex items-center justify-center p-8 w-full">
      <Tabs defaultValue="account" className="w-full max-w-md">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <div className="rounded-base border-2 border-border p-4 shadow-shadow">
            <h3 className="text-sm font-heading mb-2">Account Settings</h3>
            <p className="text-sm font-base text-muted-foreground">
              Manage your account settings and preferences.
            </p>
          </div>
        </TabsContent>
        <TabsContent value="password">
          <div className="rounded-base border-2 border-border p-4 shadow-shadow">
            <h3 className="text-sm font-heading mb-2">Change Password</h3>
            <p className="text-sm font-base text-muted-foreground">
              Update your password to keep your account secure.
            </p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}