import React from 'react';
import { usePage } from '@inertiajs/react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import Account from './Account';
import Orders from './Orders';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

const ProfileIndex = () => {
  const { user } = usePage().props as any;

  return (
    <div className="container mx-auto py-8 space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Mein Profil</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Hallo, {user.name}!</p>
          <p>Email: {user.email}</p>
        </CardContent>
      </Card>
      <Tabs defaultValue="account" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="orders">Bestellungen</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <Account />
        </TabsContent>
        <TabsContent value="orders">
          <Orders />
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default ProfileIndex;