import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export function CrmProductionPlaceholder({
  title,
  summary,
  foundationItems,
  nextStep,
  demoHref
}: {
  title: string;
  summary: string;
  foundationItems: string[];
  nextStep: string;
  demoHref?: string;
}) {
  return (
    <div className='space-y-4'>
      <Card>
        <CardHeader>
          <CardTitle>{title}</CardTitle>
          <CardDescription>{summary}</CardDescription>
        </CardHeader>
        <CardContent className='space-y-4'>
          <div className='rounded-lg border p-4'>
            <div className='text-sm font-medium'>Production path status</div>
            <div className='text-muted-foreground mt-1 text-sm'>
              This route is isolated from legacy CRM mock services and is now reserved for
              foundation-backed implementation only.
            </div>
          </div>
          <div className='rounded-lg border p-4'>
            <div className='text-sm font-medium'>Reusable foundation ready</div>
            <ul className='text-muted-foreground mt-2 space-y-1 text-sm'>
              {foundationItems.map((item) => (
                <li key={item}>- {item}</li>
              ))}
            </ul>
          </div>
          <div className='rounded-lg border border-dashed p-4'>
            <div className='text-sm font-medium'>Next implementation step</div>
            <div className='text-muted-foreground mt-1 text-sm'>{nextStep}</div>
          </div>
          {demoHref ? (
            <div className='flex justify-end'>
              <Button variant='outline' asChild>
                <Link href={demoHref}>Open legacy demo route</Link>
              </Button>
            </div>
          ) : null}
        </CardContent>
      </Card>
    </div>
  );
}
