'use client';
import React from 'react';
import { FileSearch, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { SiCTACard } from '@/features/modals/siModal/page';
import { useTranslations } from 'next-intl';

export const CtaCards = () => {
  const t = useTranslations('Cabinet');
  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {/* Plagiat */}
        <Link
          href={'/plagiat'}
          className="group relative overflow-hidden rounded-2xl bg-linear-to-br from-blue-500 to-blue-600 p-6 text-left shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:shadow-md"
        >
          <div className="absolute right-3 top-3 opacity-10 pointer-events-none">
            <FileSearch size={72} className="text-white" />
          </div>
          <FileSearch size={26} className="text-white mb-4" />
          <h3 className="text-white font-semibold text-base mb-1">
            {t('plagiatCheck')}
          </h3>
          <p className="text-blue-100 text-sm mb-4 leading-relaxed">
            {t('checkDesc')}
          </p>
          <span className="inline-flex items-center gap-1.5 text-white text-xs font-medium bg-white/20 rounded-lg px-3 py-1.5 group-hover:bg-white/30 transition-colors">
            {t('submit')} <ArrowRight size={12} />
          </span>
        </Link>

        {/* SI */}
        <SiCTACard />
      </div>
    </>
  );
};