"use client"

import type React from "react"

interface WorkoutCardProps {
  onBackClick: () => void
  onCardClick: () => void
}

// Это означает, что компонент ожидает получить пропс onBackClick, который должен быть функцией, вызываемой при определенном событии (например, при нажатии кнопки "Назад").

export const WorkoutCardHome: React.FC<WorkoutCardProps> = ({ onBackClick, onCardClick }) => {
  return (
    <div
      onClick={onCardClick}
      className="bg-gradient-to-r from-[#2BACBE] to-[#1E7F8C] rounded-3xl p-6 shadow-2xl text-white max-w-4xl mx-auto my-5 transition-transform transform hover:scale-105 duration-300 cursor-pointer"
    >
      {/* Заголовок и статус */}
      <div className="flex items-center justify-between flex-wrap mb-6 border-b-2 pb-4">
        <h2 className="text-xl sm:text-2xl font-extrabold">Тренировка</h2>
        <button
          onClick={(e) => {
            e.stopPropagation()
            onBackClick()
          }}
          className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg ml-auto"
        >
          <svg
            className="w-6 h-6 text-white transform rotate-180"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7L15 5" />
          </svg>
        </button>
      </div>

      {/* Основной блок с иконками и прогрессом */}
      <div className="flex items-start flex-wrap space-x-4 mb-1">
        {/* Иконка часов */}
        <div className="relative flex-shrink-0 mr-6">
          <div className="w-20 h-20 bg-white/70 rounded-2xl flex items-center justify-center shadow-xl transition-transform hover:scale-105 duration-300">
            {/* Clock SVG */}
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20" fill="none">
              <path
                fill="#2BACBE"
                d="M15 1.34A10 10 0 1 1 .005 10.324L0 10l.005-.324A10 10 0 0 1 15 1.34ZM10 4a1 1 0 0 0-.993.883L9 5v5l.009.13a1 1 0 0 0 .197.478l.087.1 3 3 .094.082a1 1 0 0 0 1.226 0l.094-.083.083-.094a1 1 0 0 0 0-1.226l-.083-.094L11 9.585V5l-.007-.117A1 1 0 0 0 10 4Z"
              />
              <polyline points="12,6,12,12,16,14" />
            </svg>
          </div>
          {/* Пульсирующая точка */}
          <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-white rounded-full shadow-lg animate-pulse flex items-center justify-center">
            <svg className="w-3 h-3 text-[#2BACBE]" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z" />
            </svg>
          </div>
        </div>

        {/* Информация о упражнении */}
        <div className="flex flex-col justify-center flex-grow">
          <h3 className="font-extrabold text-lg mb-2">В процессе</h3>
          <p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p>
        </div>
      </div>
    </div>
  )
}