import { AnyObject, SUN_MOON_FIELDS, extractField, formatPanchangElement } from "@/app/lib/panchangParse";

export default function PanchangSunMoonCards({ derivedSunMoon }: { derivedSunMoon: AnyObject }) {
  return (
    <div className="panchang-timing-grid">
      {SUN_MOON_FIELDS.map((field) => (
        <div className={`panchang-timing-card tone-${field.tone}`} key={field.key}>
          <span className="panchang-timing-icon">{field.icon}</span>

          <span className="panchang-timing-label">{field.label}</span>

          <span className="panchang-timing-value">
            {formatPanchangElement(extractField(derivedSunMoon, field.aliases))}
          </span>
        </div>
      ))}
    </div>
  );
}