import { useContext } from 'react';
import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { User } from '@/components/icons';
import { UserEditForm } from './UserEditForm';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { UserWebsites } from './UserWebsites';
import { UserContext } from './UserProvider';

export function UserSettings({ userId }: { userId: string }) {
  const { formatMessage, labels } = useMessages();
  const user = useContext(UserContext);

  return (
    <>
      <SectionHeader title={user?.username} icon={<User />} />
      <Tabs>
        <TabList>
          <Tab id="details">{formatMessage(labels.details)}</Tab>
          <Tab id="websites">{formatMessage(labels.websites)}</Tab>
        </TabList>
        <TabPanel id="details">
          <UserEditForm userId={userId} />
        </TabPanel>
        <TabPanel id="websites">
          <UserWebsites userId={userId} />
        </TabPanel>
      </Tabs>
    </>
  );
}