const hours = [
  { day: "Monday - Thursday", time: "08:30 - 18:00" },
  { day: "Friday", time: "08:30 - 17:00" },
  { day: "Saturday - Sunday", time: null },
];

export default function OfficeHours() {
  return (
    <div className="bg-white rounded-[24px] p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100">
      <div className="flex items-center gap-3 mb-6">
        <i className="far fa-clock text-primary text-xl"></i>
        <div className="contact-card-title font-display font-bold text-dark" style={{ fontSize: "1.3rem" }}>Office Hours</div>
      </div>

      <div className="space-y-4">
        {hours.map(({ day, time }) => (
          <div key={day} className="flex justify-between items-center pb-3 border-b border-gray-100 text-sm">
            <span className="text-gray-600 font-medium">{day}</span>
            {time
              ? <span className="text-dark font-bold">{time}</span>
              : <span className="text-gray-400 font-medium">Closed</span>
            }
          </div>
        ))}
      </div>
    </div>
  );
}