import React from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Section } from "@/components/profile/blocks/section";
import { Routes } from "@/config/routes";
import { InvoiceListBlock } from "@/components/profile/blocks/invoice-list-block";
import { SubscriptionList } from "@/components/profile/blocks/subscription-list";

export const SubscriptionSection: React.FC = () => {
    return (
        <Section title='abonnement / medlemskab'>
            <Card className='w-full gap-3 rounded-none border-0 bg-neutral-100 p-5 font-serif shadow-none'>
                <CardContent className='p-0'>
                    <SubscriptionList />

                    <div className='mt-6 font-sans'>
                        <p>
                            Du kan blive medlem på{" "}
                            <Link className='text-client-red hover:underline' href={Routes.PAYMENTS.PERSONAL.MAIN}>
                                medlems-siden
                            </Link>
                            .
                        </p>
                        <p>
                            Du kan tegne erhvervsabonnement på{" "}
                            <Link className='text-client-red hover:underline' href={Routes.PAYMENTS.BUSINESS}>
                                abonnements-siden
                            </Link>
                            .
                        </p>
                    </div>

                    <InvoiceListBlock />
                </CardContent>
            </Card>
        </Section>
    );
};