import CompanyForm from "../forms/company-form";
import { Separator } from "@/components/ui/separator";
import { OrganizationCard } from "@/components/organization-card";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Routes } from "@/config/routes";
import { type User } from "better-auth";

interface CompanyBlockProps {
    user: User;
    session: unknown;
    activeOrganization: unknown;
}

export default function CompanyBlock({ user, session, activeOrganization }: CompanyBlockProps) {
    return (
        <section className='mx-auto w-full max-w-[1362px] grow p-3 md:px-8 md:py-4 xl:border-x'>
            <div className='flex flex-col xl:flex-row'>
                <div className='shrink-0 xl:w-67'>
                    <h2 className='text-border mb-4 text-xl leading-none font-bold md:text-3xl'>konto og sikkerhed</h2>
                </div>
                <div className='flex w-full flex-col gap-5'>
                    <CompanyForm user={user} />
                    <OrganizationCard
                        session={JSON.parse(JSON.stringify(session))}
                        activeOrganization={JSON.parse(JSON.stringify(activeOrganization))}
                    />
                    <div className='flex justify-end'>
                        <Link href={Routes.PROFILE_ORGANIZATION}>
                            <Button variant='outline' className='rounded-none'>
                                Administrer organisation
                            </Button>
                        </Link>
                    </div>
                </div>
            </div>
            <Separator className='mt-7' />
        </section>
    );
}