'use client';

import * as Dialog from '@radix-ui/react-dialog';
import { useTranslations } from 'next-intl';

interface MobileFilterDrawerProps {
  children: React.ReactNode;
  onApply?: () => void;
}

export function MobileFilterDrawer({ children, onApply }: MobileFilterDrawerProps) {
  const t = useTranslations('search');
  const tCommon = useTranslations('common');

  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button
          type="button"
          className="btn-secondary md:hidden flex items-center gap-2 text-sm"
          aria-label={t('filters')}
        >
          <svg
            className="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M3 4h13M3 8h9m-9 4h6"
            />
          </svg>
          {t('filters')}
        </button>
      </Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/40 z-40" />
        <Dialog.Content
          className="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white p-4 max-h-[80vh] overflow-y-auto"
          aria-describedby={undefined}
        >
          <Dialog.Title className="text-base font-semibold mb-4">{t('filters')}</Dialog.Title>

          {children}

          <Dialog.Close asChild>
            <button
              type="button"
              onClick={onApply}
              className="mt-4 btn-primary w-full"
            >
              {t('apply_filters')}
            </button>
          </Dialog.Close>

          <Dialog.Close asChild>
            <button
              type="button"
              className="absolute top-4 end-4 text-neutral-500 hover:text-neutral-800 p-1"
              aria-label={tCommon('close')}
            >
              <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                <path d="M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z" />
              </svg>
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}