import Link from 'next/link'
import { NavModule, NavCategory } from '@/lib/navigation'

interface ModuleCardProps {
  module: NavModule
  category: NavCategory
  showDescription?: boolean
}

export function ModuleCard({ module, category, showDescription = true }: ModuleCardProps) {
  return (
    <Link
      href={module.href}
      className={`block p-4 rounded-xl border-2 transition-all hover:shadow-md bg-${category.colorClass}-50 border-${category.colorClass}-200 hover:border-${category.colorClass}-400`}
      style={{
        backgroundColor: `${category.color}10`,
        borderColor: `${category.color}40`,
      }}
    >
      <div className="flex items-start gap-3">
        {/* Color indicator */}
        <div
          className="w-1.5 h-12 rounded-full flex-shrink-0"
          style={{ backgroundColor: category.color }}
        />

        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-slate-900 truncate">{module.name}</h3>
          {showDescription && (
            <p className="text-sm text-slate-500 mt-1 line-clamp-2">{module.description}</p>
          )}

          {/* Audience tags */}
          <div className="flex flex-wrap gap-1 mt-2">
            {module.audience.slice(0, 2).map((a) => (
              <span
                key={a}
                className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-slate-600 bg-slate-100"
              >
                {a}
              </span>
            ))}
          </div>
        </div>

        {/* Arrow */}
        <svg
          className="w-5 h-5 text-slate-400 flex-shrink-0"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </Link>
  )
}

// Category Card for overview pages
interface CategoryCardProps {
  category: NavCategory
  showModuleCount?: boolean
}

export function CategoryCard({ category, showModuleCount = true }: CategoryCardProps) {
  return (
    <Link
      href={`/${category.id}`}
      className="block p-6 rounded-xl border-2 transition-all hover:shadow-lg bg-white"
      style={{
        borderColor: `${category.color}40`,
      }}
    >
      <div className="flex items-center gap-4">
        {/* Icon */}
        <div
          className="w-12 h-12 rounded-xl flex items-center justify-center"
          style={{ backgroundColor: `${category.color}20` }}
        >
          <span style={{ color: category.color }} className="text-2xl">
            {category.icon === 'shield' && '🛡️'}
            {category.icon === 'brain' && '🧠'}
            {category.icon === 'server' && '🖥️'}
            {category.icon === 'graduation' && '🎓'}
            {category.icon === 'mail' && '📬'}
            {category.icon === 'code' && '💻'}
          </span>
        </div>

        <div className="flex-1 min-w-0">
          <h3 className="font-bold text-lg text-slate-900">{category.name}</h3>
          <p className="text-sm text-slate-500 line-clamp-1">{category.description}</p>
          {showModuleCount && (
            <span className="text-xs text-slate-400 mt-1">
              {category.modules.length} Module
            </span>
          )}
        </div>

        {/* Arrow */}
        <svg
          className="w-6 h-6 text-slate-400 flex-shrink-0"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </Link>
  )
}