'use client'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ArrowRight, Sparkles } from 'lucide-react'
import Link from 'next/link'
import { useLanguage } from '@/lib/i18n'

export function AISettingsLinkCard() {
  const { t } = useLanguage()

  return (
    <Card className="mt-6">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-amber-500" />
          {t('nav.aiSettings')}
        </CardTitle>
        <CardDescription>
          {t('nav.configureAI')}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Link href="/settings/ai">
          <Button variant="outline" className="w-full justify-between group">
            <span>{t('nav.manageAISettings')}</span>
            <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
          </Button>
        </Link>
      </CardContent>
    </Card>
  )
}