import { Metadata } from 'next';
import { Container } from '@/components/ui/Container';
import { Layout } from '@/components/layout/Layout';
import { Card, CardHeader, CardBody } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import Link from 'next/link';

export const metadata: Metadata = {
  title: 'Subpage Example | KLZ Cables',
  description: 'Example subpage demonstrating breadcrumb functionality',
};

export default function Subpage({ params: { locale } }: { params: { locale: string } }) {
  // Breadcrumb configuration
  const breadcrumb = [
    { title: 'Example', path: `/${locale}/example` },
    { title: 'Subpage', path: `/${locale}/example/subpage` }
  ];

  return (
    <Layout 
      locale={locale} 
      siteName="KLZ Cables"
      breadcrumb={breadcrumb}
    >
      <Container maxWidth="6xl" padding="md">
        <div className="space-y-6">
          {/* Page Header */}
          <div className="text-center space-y-3">
            <h1 className="text-4xl font-bold text-gray-900">Subpage with Breadcrumb</h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              This page demonstrates the breadcrumb functionality in the Layout component.
              Notice the breadcrumb navigation above this content area.
            </p>
          </div>

          {/* Content */}
          <Card variant="elevated">
            <CardHeader>
              <h2 className="text-2xl font-semibold">Breadcrumb Features</h2>
            </CardHeader>
            <CardBody>
              <ul className="space-y-3 text-gray-700">
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span>Automatic breadcrumb generation based on current URL</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span>Clickable links for all parent pages</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span>Current page shown as non-clickable text</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span>Responsive design that works on all screen sizes</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span>Optional feature - only shown when breadcrumb prop is provided</span>
                </li>
              </ul>
            </CardBody>
          </Card>

          {/* Navigation */}
          <div className="flex justify-center gap-4">
            <Link href={`/${locale}/example`}>
              <Button variant="outline">← Back to Example</Button>
            </Link>
            <Link href={`/${locale}`}>
              <Button variant="primary">Home</Button>
            </Link>
          </div>

          {/* Code Example */}
          <Card>
            <CardHeader>
              <h3 className="text-xl font-semibold">How to Use Breadcrumbs</h3>
            </CardHeader>
            <CardBody>
              <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
                <code>{`// In your page component:
import { Layout } from '@/components/layout/Layout';

export default function MyPage({ params: { locale } }) {
  const breadcrumb = [
    { title: 'Home', path: \`/\${locale}\` },
    { title: 'Products', path: \`/\${locale}/products\` },
    { title: 'Details', path: \`/\${locale}/products/123\` }
  ];

  return (
    <Layout 
      locale={locale} 
      breadcrumb={breadcrumb}
    >
      {/* Your content */}
    </Layout>
  );
}`}</code>
              </pre>
            </CardBody>
          </Card>
        </div>
      </Container>
    </Layout>
  );
}