export default function ControlPanelFlyout({
  formData,
  mappedItems,
  mappedTasks,
}) {
  return (
    <aside className="flex h-full w-[420px] flex-col bg-background border-l border-border">
      
      {/* Header */}
      <header className="flex items-center justify-between px-md py-md border-b border-border">
        <h5 className="text-text font-semibold">Control Panel</h5>
        <button type="button" className="text-text-muted">✕</button>
      </header>

      {/* Form */}
      <form className="flex flex-col flex-1">

        {/* Body */}
        <div className="flex flex-col gap-md p-md">

          {/* Inline Fields */}
          <div className="grid grid-cols-2 gap-md">
            <Field label="Effective Date" required>
              <DatePicker value={formData.effectiveDate} />
            </Field>

            <Field label="Version" required>
              <Input value={formData.version} readOnly />
            </Field>
          </div>

          {/* Category */}
          <Field label="Item Category" required>
            <Select value={formData.category} />
          </Field>

          <Divider />

          {/* Description */}
          <Field label="Description" required>
            <Textarea value={formData.description} />
          </Field>

          <Field label="Additional Details">
            <Textarea value={formData.additionalDetails} />
          </Field>

          <Divider />

          {/* Mapped Items */}
          <SectionHeader label="Mapped Items" action="Edit" />
          <TagGroup items={mappedItems} />

          <Divider />

          {/* Tasks */}
          <SectionHeader label="Tasks" action="Edit" />
          <TagGroup items={mappedTasks} />
        </div>

        {/* Footer */}
        <footer className="mt-auto flex items-center justify-between px-md py-md border-t border-border">
          <button type="button" className="btn-tertiary">Support</button>
          <button type="submit" className="btn-primary">Save Item</button>
        </footer>
      </form>
    </aside>
  );
}