'use client';

import { Heading, Text } from '@/components/ui/Typography';
import { ToggleSwitch } from './ToggleSwitch';

interface CookieCategoryCardProps {
  title: string;
  description: string;
  enabled: boolean;
  onChange: () => void;
  disabled?: boolean;
}

export function CookieCategoryCard({ 
  title, 
  description, 
  enabled, 
  onChange, 
  disabled = false 
}: CookieCategoryCardProps) {
  return (
    <div className="border rounded-lg p-4">
      <div className="flex items-center justify-between mb-2">
        <Heading level={4}>{title}</Heading>
        <ToggleSwitch 
          enabled={enabled} 
          onChange={onChange} 
          disabled={disabled} 
        />
      </div>
      <Text size="sm" className="text-gray-600">
        {description}
      </Text>
    </div>
  );
}