'use client'

import { motion } from 'motion/react'
import { Brain } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { useLanguage } from '@/lib/i18n'

interface Props {
  onNext: () => void
  onSkip: () => void
  userName?: string | null
}

export function OnboardingStepWelcome({ onNext, onSkip, userName }: Props) {
  const { t } = useLanguage()
  const firstName = userName?.split(' ')[0] ?? null

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -16 }}
      className="flex flex-col items-center gap-6 text-center"
    >
      <motion.div
        initial={{ scale: 0.7, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ delay: 0.1, type: 'spring', stiffness: 200 }}
        className="flex h-20 w-20 items-center justify-center rounded-2xl bg-brand-accent/10 text-brand-accent"
      >
        <Brain className="h-10 w-10" />
      </motion.div>

      <div className="space-y-2">
        <h2 className="text-2xl font-bold tracking-tight text-foreground">
          {firstName
            ? t('onboarding.welcome_title_name', { name: firstName })
            : t('onboarding.welcome_title')}
        </h2>
        <p className="text-base text-muted-foreground max-w-xs">
          {t('onboarding.welcome_subtitle')}
        </p>
      </div>

      <div className="flex flex-col gap-2 w-full max-w-xs">
        <Button onClick={onNext} size="lg" className="w-full">
          {t('onboarding.welcome_cta')} →
        </Button>
        <button
          onClick={onSkip}
          className="text-xs text-muted-foreground/60 hover:text-muted-foreground transition-colors py-1"
        >
          {t('onboarding.skip')}
        </button>
      </div>
    </motion.div>
  )
}