---
import { Icon } from 'astro-icon/components'

import { cn } from '../lib/cn'

import type { ActionInputNoFormData, AnyAction } from '../lib/astroActions'
import type { HTMLAttributes } from 'astro/types'

export type Props<TAction extends AnyAction = AnyAction> = Omit<HTMLAttributes<'form'>, 'action'> & {
  label: string
  icon?: string
  action: TAction
  data: ActionInputNoFormData<TAction>
}

const { label, icon, action, data, class: className, ...htmlProps } = Astro.props
---

<form action={action} class={cn('contents', className)} {...htmlProps}>
  {Object.entries(data).map(([key, value]) => <input type="hidden" name={key} value={String(value)} />)}
  <button
    class="text-day-300 hover:bg-night-800 flex w-full items-center px-4 py-2 text-left text-sm hover:text-white"
    type="submit"
  >
    {icon && <Icon name={icon} class="mr-2 size-4" />}
    <span class="flex-1">{label}</span>
    <slot name="end" />
  </button>
</form>