import React from 'react';
import { FileSearch, BrainCircuit, ArrowRight } from 'lucide-react';
import type { CabinetSection } from '../../lib/types';

interface CtaCardsProps {
  onNavigate: (section: CabinetSection) => void;
}

export const CtaCards: React.FC<CtaCardsProps> = ({ onNavigate }) => (
  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
    {/* Plagiat */}
    <button
      onClick={() => onNavigate('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">
        Plagiat tekshiruvi
      </h3>
      <p className="text-blue-100 text-sm mb-4 leading-relaxed">
        Hujjatingizni originallik uchun tekshiring
      </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">
        Yuborish <ArrowRight size={12} />
      </span>
    </button>

    {/* SI */}
    <button
      onClick={() => onNavigate('si')}
      className="group relative overflow-hidden rounded-2xl bg-linear-to-br from-violet-500 to-violet-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">
        <BrainCircuit size={72} className="text-white" />
      </div>
      <BrainCircuit size={26} className="text-white mb-4" />
      <h3 className="text-white font-semibold text-base mb-1">SI detektor</h3>
      <p className="text-violet-100 text-sm mb-4 leading-relaxed">
        Matnni sun&apos;iy intellekt uchun tekshiring
      </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">
        Yuborish <ArrowRight size={12} />
      </span>
    </button>
  </div>
);