'use client';

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { Card, CardContent } from '@/components/ui/card';

interface PageFilterProps {
  children: ReactNode;
  className?: string;
  variant?: 'default' | 'bordered' | 'ghost';
}

export function PageFilter({
  children,
  className,
  variant = 'default',
}: PageFilterProps) {
  const variants = {
    default: 'grid gap-4 p-4 border rounded-lg bg-card',
    bordered: 'grid gap-4 p-4 border rounded-lg',
    ghost: 'flex flex-wrap gap-4 items-end',
  };

  if (variant === 'ghost') {
    return (
      <div className={cn(variants.ghost, className)}>
        {children}
      </div>
    );
  }

  return (
    <Card className={cn(variant === 'bordered' ? 'bg-transparent' : '', className)}>
      <CardContent className={cn(variants[variant], 'p-4')}>
        {children}
      </CardContent>
    </Card>
  );
}

interface FilterGroupProps {
  children: ReactNode;
  className?: string;
}

export function FilterGroup({ children, className }: FilterGroupProps) {
  return (
    <div className={cn('space-y-2', className)}>
      {children}
    </div>
  );
}

interface FilterLabelProps {
  children: ReactNode;
  htmlFor?: string;
  className?: string;
}

export function FilterLabel({ children, htmlFor, className }: FilterLabelProps) {
  return (
    <label
      htmlFor={htmlFor}
      className={cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className)}
    >
      {children}
    </label>
  );
}

export default PageFilter;
