'use client';

import { Lock, Clock, ArrowRight, LayoutTemplate } from 'lucide-react';

interface PlaceholderProps {
  moduleName: string;
  sprint: number | string;
  status?: string;
  progress?: string;
  description: string;
  dependencies?: string;
}

export default function PlaceholderPage({
  moduleName,
  sprint,
  status = 'Planned',
  progress = '0%',
  description,
  dependencies = 'None'
}: PlaceholderProps) {
  return (
    <div className="flex flex-col items-center justify-center py-20 px-4 text-center">
      <div className="w-20 h-20 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-center justify-center text-red-500 mb-6 relative">
        <LayoutTemplate className="w-10 h-10" />
        <div className="absolute -bottom-2 -right-2 w-8 h-8 bg-[#141414] border border-white/10 rounded-full flex items-center justify-center text-gray-400 shadow-xl">
          <Lock className="w-4 h-4" />
        </div>
      </div>

      <h2 className="text-2xl font-bold text-white mb-2">{moduleName}</h2>
      <p className="text-gray-400 max-w-lg mx-auto mb-8 text-sm leading-relaxed">
        {description}
      </p>

      <div className="w-full max-w-2xl bg-[#141414] border border-white/5 rounded-2xl p-6 text-left">
        <div className="flex items-center gap-3 mb-6 pb-4 border-b border-white/5">
          <Clock className="w-5 h-5 text-red-400" />
          <h3 className="text-white font-bold text-lg">Thông tin Module</h3>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-12">
          <div>
            <p className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">Status</p>
            <div className="inline-flex px-2.5 py-1 rounded-full bg-yellow-500/10 text-yellow-500 text-xs font-bold border border-yellow-500/20">
              {status}
            </div>
          </div>
          <div>
            <p className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">Sprint</p>
            <p className="text-white font-bold">{sprint}</p>
          </div>
          <div>
            <p className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">Progress</p>
            <p className="text-white font-bold">{progress}</p>
          </div>
          <div>
            <p className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">Dependency</p>
            <p className="text-white font-medium text-sm">{dependencies}</p>
          </div>
        </div>

        <div className="mt-8 pt-4 border-t border-white/5 flex justify-between items-center text-xs text-gray-500">
          <span>Hệ thống SHOPMMO Core</span>
          <span>Last updated: {new Date().toLocaleDateString('vi-VN')}</span>
        </div>
      </div>
      
      <button 
        onClick={() => window.history.back()}
        className="mt-8 text-gray-400 hover:text-white text-sm font-medium flex items-center gap-2 transition-colors"
      >
        <ArrowRight className="w-4 h-4 rotate-180" /> Quay lại trang trước
      </button>
    </div>
  );
}