'use client'

import React from 'react';

const moonPhases = [
    { name: 'New Moon', lightClass: 'w-0 h-0', darkClass: 'w-full h-full' },
    { name: 'Waxing Crescent', lightClass: 'w-[25%] h-full right-0', darkClass: 'w-[75%] h-full' },
    { name: 'First Quarter', lightClass: 'w-1/2 h-full right-0', darkClass: 'w-1/2 h-full' },
    { name: 'Waxing Gibbous', lightClass: 'w-[75%] h-full right-0', darkClass: 'w-[25%] h-full' },
    { name: 'Full Moon', lightClass: 'w-full h-full', darkClass: 'w-0 h-0' },
    { name: 'Waning Gibbous', lightClass: 'w-[75%] h-full left-0', darkClass: 'w-[25%] h-full right-0' },
    { name: 'Last Quarter', lightClass: 'w-1/2 h-full left-0', darkClass: 'w-1/2 h-full right-0' },
    { name: 'Waning Crescent', lightClass: 'w-[25%] h-full left-0', darkClass: 'w-[75%] h-full right-0' },
  ];
  
  function Phases() {
    return (
      <div className="bg-gray-900 min-h-screen flex items-center justify-center p-4">
        <div className="bg-gray-800 p-8 rounded-lg shadow-xl max-w-4xl w-full">
          <h2 className="text-2xl font-bold text-white mb-6 text-center">Phases of the Moon</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {moonPhases.map((phase, index) => (
              <div key={index} className="flex flex-col items-center">
                <div className="relative w-24 h-24 mb-2">
                  <div className={`moon-phase absolute inset-0 bg-gray-300 rounded-full overflow-hidden`}>
                    <div className={`absolute ${phase.darkClass} bg-gray-800 rounded-full`}></div>
                    <div className={`absolute ${phase.lightClass} bg-gray-300 rounded-full`}></div>
                  </div>
                </div>
                <span className="text-sm text-gray-300 text-center">{phase.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

export default function Home() {
    return (
      <main>
        <Phases />
      </main>
    );
  }