"use client"

import type React from "react"
import { useHistory } from "react-router-dom"

interface CourseCardProps {
  id: number
  name: string
  progress: number
  color: string
  icon: string
  exercises: number
  nextExercise: string
}

const CourseCard: React.FC<CourseCardProps> = ({
  id,
  name,
  progress,
  color,
  icon,
}) => {
  const history = useHistory()

  return (



    
    <div
      onClick={() => history.push(`/course/${id}/exercises`)}
      className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
    >
      <div className="flex items-center space-x-5">
        <div
          className={`w-16 h-16 bg-gradient-to-br ${color} rounded-2xl flex items-center justify-center shadow-lg`}
        >
          <span className="text-2xl text-white filter drop-shadow-sm">{icon}</span>
        </div>
        <div className="flex-1">
          <h3 className="font-black text-[#5F5C5C] text-lg mb-2">{name}</h3>
          <div className="bg-white/50 rounded-full h-3 mb-2 ">
            <div
              className={`bg-gradient-to-r ${color} h-3 rounded-full transition-all duration-700 shadow-sm`}
              style={{ width: `${progress}%` }}
            ></div>
          </div>
          <p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
        </div>
        <div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
          <span className="text-2xl font-bold">→</span>
        </div>
      </div>
    </div>
  )
}

export default CourseCard