"use client";

import type { MarketingLocation, MarketingRole } from "@/lib/marketing";
import { MARKETING_DATE_RANGE_LABELS, MARKETING_ROLE_LABELS } from "@/lib/marketing/labels";

type MarketingHeaderProps = {
  role: MarketingRole;
  dateRange: "7d" | "30d" | "qtd";
  locationId: "all" | string;
  locations: MarketingLocation[];
  onDateRangeChange: (range: "7d" | "30d" | "qtd") => void;
  onLocationChange: (locationId: "all" | string) => void;
};

export default function MarketingHeader({
  role,
  dateRange,
  locationId,
  locations,
  onDateRangeChange,
  onLocationChange,
}: MarketingHeaderProps) {
  return (
    <header className="rounded-benell border border-benell-stroke bg-benell-surface p-5 shadow-benell">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-display">Mercadotecnia</h1>
          <p className="text-body mt-1 text-benell-text-soft">
            Iniciativas, crecimiento social y pulso de marca por ubicación.
          </p>
        </div>

        <div className="grid w-full gap-3 sm:grid-cols-3 lg:w-auto lg:min-w-[680px]">
          <label className="block space-y-1">
            <span className="text-label font-semibold">Rango</span>
            <select
              value={dateRange}
              onChange={(event) => onDateRangeChange(event.target.value as "7d" | "30d" | "qtd")}
              className="text-body w-full rounded-xl border border-benell-stroke bg-white px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-benell-brown"
            >
              {Object.entries(MARKETING_DATE_RANGE_LABELS).map(([value, label]) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </select>
          </label>

          <label className="block space-y-1">
            <span className="text-label font-semibold">Ubicación</span>
            <select
              value={locationId}
              onChange={(event) => onLocationChange(event.target.value)}
              className="text-body w-full rounded-xl border border-benell-stroke bg-white px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-benell-brown"
            >
              <option value="all">Todas</option>
              {locations.map((location) => (
                <option key={location.id} value={location.id}>
                  {location.name}
                </option>
              ))}
            </select>
          </label>

          <label className="block space-y-1">
            <span className="text-label font-semibold">Vista</span>
            <div className="text-body w-full rounded-xl border border-benell-stroke bg-white px-3 py-2 text-benell-text-soft">
              {MARKETING_ROLE_LABELS[role]}
            </div>
          </label>
        </div>
      </div>
    </header>
  );
}
