'use client';

import Link from 'next/link';

import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
import { cn } from '@/lib/utils';

interface PreviewAction {
  href: string;
  label: string;
}

interface FeaturePreviewPageProps {
  eyebrow: string;
  title: string;
  description: string;
  status?: 'preview' | 'request-only' | 'active';
  bullets: readonly string[];
  primaryAction?: PreviewAction;
  secondaryAction?: PreviewAction;
}

export function FeaturePreviewPage({
  eyebrow,
  title,
  description,
  status = 'preview',
  bullets,
  primaryAction,
  secondaryAction,
}: FeaturePreviewPageProps) {
  const primaryActionClassName =
    'inline-flex h-10 items-center justify-center rounded-md bg-gray-700 px-4 text-base font-medium text-white transition-colors hover:bg-gray-600';
  const secondaryActionClassName =
    'inline-flex h-10 items-center justify-center rounded-md border border-gray-600 bg-transparent px-4 text-base font-medium text-white transition-colors hover:bg-gray-800';

  return (
    <div className="mx-auto max-w-4xl px-4 py-10">
      <div className="mb-8">
        <p className="mb-2 text-sm font-medium uppercase tracking-wide text-orange-400">{eyebrow}</p>
        <div className="mb-3 flex items-center gap-3">
          <h1 className="text-3xl font-bold text-white">{title}</h1>
          <Badge variant={status === 'active' ? 'default' : 'secondary'}>
            {status === 'request-only' ? 'Request Only' : status === 'active' ? 'Active' : 'Preview'}
          </Badge>
        </div>
        <p className="max-w-3xl text-gray-400">{description}</p>
      </div>

      <Card className="border-gray-800 bg-gray-900/70">
        <CardHeader>
          <CardTitle className="text-white">Current Scope</CardTitle>
          <CardDescription>
            This route is now real and intentionally describes the supported boundary for this workspace area.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <ul className="space-y-2 text-sm text-gray-300">
            {bullets.map((bullet) => (
              <li key={bullet}>• {bullet}</li>
            ))}
          </ul>

          <div className="flex flex-col gap-3 pt-2 sm:flex-row">
            {primaryAction ? (
              <Link href={primaryAction.href} className={cn(primaryActionClassName)}>
                {primaryAction.label}
              </Link>
            ) : null}
            {secondaryAction ? (
              <Link href={secondaryAction.href} className={cn(secondaryActionClassName)}>
                {secondaryAction.label}
              </Link>
            ) : null}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}