import ComponentsPricingTableToggle from '@/components/pricing-table/components-pricing-table-toggle';
import IconArrowLeft from '@/components/icon/icon-arrow-left';
import PanelCodeHighlight from '@/components/panel-code-highlight';
import { Metadata } from 'next';
import Link from 'next/link';
import React from 'react';

export const metadata: Metadata = {
    title: 'Pricing Table',
};

const PricingTable = () => {
    return (
        <div>
            <ul className="flex space-x-2 rtl:space-x-reverse">
                <li>
                    <Link href="/" className="text-primary hover:underline">
                        Dashboard
                    </Link>
                </li>
                <li className="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                    <span>Pricing Table</span>
                </li>
            </ul>
            <div className="space-y-8 pt-5">
                {/* Basic */}
            

                {/*  Toggle */}
                <ComponentsPricingTableToggle />

                {/* Animated */}
              
            </div>
        </div>
    );
};

export default PricingTable;