import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { Button } from '@voilajsx/uikit/button';
import { Badge } from '@voilajsx/uikit/badge';

interface {{ComponentName}}Props {
  title?: string;
  description?: string;
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
  children?: React.ReactNode;
  onAction?: () => void;
  className?: string;
}

export const {{ComponentName}}: React.FC<{{ComponentName}}Props> = ({
  title = '{{ComponentName}} Component',
  description = 'A reusable {{componentName}} component built with UIKit',
  variant = 'default',
  children,
  onAction,
  ...props
}) => {
  return (
    <Card className="{{componentName}}-component" {...props}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              🎨 {title}
            </CardTitle>
            <CardDescription>
              {description}
            </CardDescription>
          </div>
          <Badge variant="outline" className="text-xs">
            {{theme}} theme
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {children || (
          <div className="space-y-4">
            <p className="text-muted-foreground">
              This is your generated {{componentName}} component. Customize it to fit your needs.
            </p>

            <div className="flex gap-2">
              <Button
                variant={variant}
                onClick={onAction}
                size="sm"
              >
                Primary Action
              </Button>
              <Button variant="outline" size="sm">
                Secondary Action
              </Button>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <div className="p-3 border rounded-lg">
                <h4 className="font-semibold text-sm mb-1">Feature 1</h4>
                <p className="text-xs text-muted-foreground">
                  Add your {{componentName}} feature content here.
                </p>
              </div>
              <div className="p-3 border rounded-lg">
                <h4 className="font-semibold text-sm mb-1">Feature 2</h4>
                <p className="text-xs text-muted-foreground">
                  Add more {{componentName}} functionality here.
                </p>
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
};