import React from 'react';
import { StudyPlanDay } from '../../types';
import { Calendar, CheckCircle } from 'lucide-react';

interface PlanProps {
  plan: StudyPlanDay[];
}

export function Plan({ plan }: PlanProps) {
  if (!plan || plan.length === 0) return null;

  return (
    <div className="mx-auto w-full max-w-[920px] px-8 py-12 pb-24">
      <div className="mb-12">
        <h2 className="text-sm font-medium text-teal-500 uppercase tracking-widest mb-2">Study Plan</h2>
        <p className="text-zinc-400 text-lg">A practical schedule to master this material.</p>
      </div>

      <div className="space-y-6">
        {plan.map((dayPlan, index) => (
          <div key={index} className="bg-white/5 border border-white/5 rounded-2xl p-6 flex gap-6">
            <div className="flex-shrink-0 pt-1">
              <div className="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center text-teal-500">
                <Calendar size={18} />
              </div>
            </div>
            
            <div className="flex-1">
              <h3 className="text-lg font-medium text-zinc-100 mb-4">{dayPlan.day}</h3>
              <ul className="space-y-3">
                {dayPlan.tasks.map((task, taskIdx) => (
                  <li key={taskIdx} className="flex items-start gap-3 text-zinc-300">
                    <CheckCircle size={16} className="text-zinc-600 mt-1 flex-shrink-0" />
                    <span className="leading-relaxed">{task}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}