import { useTranslation } from '@/hooks/useTranslation';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';

interface ComingSoonProps {
  feature: string;
  onGoBack?: () => void;
}

/** SUMI-themed logo mark (simplified V shape) */
function SumiLogoIllustration() {
  return (
    <div className="relative mb-6">
      <div className="w-24 h-24 mx-auto rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-secondary/20 flex items-center justify-center">
        <svg
          viewBox="0 0 24 24"
          className="w-12 h-12 text-primary"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden
        >
          <path d="M12 3v18M6 9l6 6 6-6" />
        </svg>
      </div>
    </div>
  );
}

export function ComingSoon({ feature, onGoBack }: ComingSoonProps) {
  const { t } = useTranslation();

  return (
    <div className="flex min-h-layout-page flex-col items-center justify-center gap-6 px-6 text-center">
      <SumiLogoIllustration />
      <h1 className="text-3xl font-bold tracking-tight text-foreground">{feature}</h1>
      <p className="max-w-md text-lg text-muted-foreground">
        {t('comingSoon.description')}
      </p>
      <div className="flex flex-wrap items-center justify-center gap-3">
        {onGoBack && (
          <Button
            variant="outline"
            onClick={onGoBack}
            className="gap-2"
          >
            <ArrowLeft className="h-4 w-4" />
            {t('comingSoon.goBack')}
          </Button>
        )}
        <Button variant="default" disabled>
          {t('comingSoon.notifyMe')}
        </Button>
      </div>
    </div>
  );
}