Build a Date to Day Finder in React

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const date = new Date('2025-12-25');
const dayName = days[date.getDay()]; // "Thursday"

const date = new Date('2025-12-25');
const dayName = date.toLocaleDateString('en-US', { weekday: 'long' }); // "Thursday"

"use client"

import { useState } from "react"
import { Calendar, RefreshCw } from "lucide-react"

export default function DayFinder() {
  const [dateStr, setDateStr] = useState("")
  const [day, setDay] = useState<string | null>(null)

  const findDay = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setDateStr(val);
    
    if (!val) {
        setDay(null);
        return;
    }

    // Create date object (append time to avoid UTC shift issues)
    const dateObj = new Date(val + 'T12:00:00');
    
    const dayName = dateObj.toLocaleDateString('en-US', { 
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    
    setDay(dayName);
  }

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-2xl shadow-xl border border-indigo-100 text-center">
       <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
          <Calendar size={24} />
       </div>
       
       <h2 className="text-2xl font-bold text-slate-800 mb-6">Day Finder</h2>

       <div className="relative mb-8">
          <input 
            type="date"
            value={dateStr}
            onChange={findDay}
            className="w-full p-4 text-center text-lg font-medium border-2 border-slate-200 rounded-xl focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition"
          />
       </div>

       {day ? (
         <div className="animate-in zoom-in duration-300">
            <div className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">It Is A</div>
            <div className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
               {day.split(',')[0]}
            </div>
            <div className="text-sm font-medium text-slate-500 mt-2">
               {day.split(',').slice(1).join(',')}
            </div>
         </div>
       ) : (
         <div className="text-slate-400 text-sm">
            Pick a date to see the day
         </div>
       )}
    </div>
  )
}