import { ArrowRight, MonitorPlay } from "lucide-react";
import Link from "next/link";
import React from "react";

interface PrepCardProps {
  id: string | number;
  title: string;
  questions: number;
  mins: number;
  icon?: React.ReactNode;
  isActive?: boolean;
}

export function PrepCard({ title, questions, mins, icon, id }: PrepCardProps) {
  return (
    <div
      className="bg-white rounded-xl shadow-sm border overflow-hidden flex flex-col items-center p-5 text-center transition-all duration-300 border-gray-100 hover:border-blue-400 hover:scale-[1.02] hover:shadow-md cursor-pointer"
    >
      <div className="w-[72px] h-[72px] rounded-2xl bg-[#fff5f0] flex items-center justify-center mb-5 mt-1 overflow-hidden">
        {icon || <MonitorPlay className="w-6 h-6 text-[#fc6123]" />}
      </div>
      <h3 className="font-bold text-gray-900 text-base mb-1">{title}</h3>
      <p className="text-xs text-gray-500 font-medium mb-4">
        {questions} Questions • {mins} Mins
      </p>
      <Link href={`/interview-prep/${id}`} className="w-full">
        <button className="w-full bg-[#fc6123] hover:bg-[#F4511E] text-white py-2 rounded-lg text-sm font-semibold flex items-center justify-center gap-1.5 transition-colors">
          Start Practice <ArrowRight className="w-3.5 h-3.5" />
        </button>
      </Link>
    </div>
  );
}