import { CheckCircle2, ArrowRight, Plus } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { KBCommitResponse } from '@/types/kbAccelerator'

interface SuccessScreenProps {
  result: KBCommitResponse
  onViewFlow: () => void
  onConvertAnother: () => void
}

export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessScreenProps) {
  return (
    <div className="max-w-lg mx-auto text-center space-y-6 py-12">
      <div className="flex justify-center">
        <div className="w-16 h-16 rounded-full bg-emerald-400/10 flex items-center justify-center">
          <CheckCircle2 size={32} className="text-emerald-400" />
        </div>
      </div>

      <div>
        <h2 className="text-xl font-heading font-semibold text-foreground">
          Flow Created Successfully
        </h2>
        <p className="text-sm text-muted-foreground mt-2">
          Your KB article has been converted into a {result.tree_type === 'troubleshooting' ? 'troubleshooting' : 'project'} flow
          and added to your library.
        </p>
      </div>

      <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
        <button
          onClick={onViewFlow}
          className={cn(
            'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
            'bg-primary text-white',
            'hover:brightness-110 active:scale-[0.98]'
          )}
        >
          View Flow
          <ArrowRight size={16} />
        </button>
        <button
          onClick={onConvertAnother}
          className={cn(
            'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium transition-colors',
            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
            'hover:border-[rgba(255,255,255,0.12)]'
          )}
        >
          <Plus size={16} />
          Convert Another
        </button>
      </div>
    </div>
  )
}