import React from 'react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@admin/components/ui/card';
import { Button } from '@admin/components/ui/button';
import { Badge } from '@admin/components/ui/badge';
import { Check } from 'lucide-react';

interface Feature {
    id: number;
    name: string;
    slug: string;
}

interface Package {
    id: number;
    name: string;
    slug: string;
    price: number;
    is_per_user_pricing: boolean;
    base_price_per_user: number;
    min_users: number;
    max_users: number;
    features: Feature[];
}

interface PackageCardProps {
    package: Package;
    isActive?: boolean;
    onSelect: (pkg: Package) => void;
}

export const PackageCard: React.FC<PackageCardProps> = ({ package: pkg, isActive, onSelect }) => {
    const priceDisplay = pkg.is_per_user_pricing
        ? `$${pkg.base_price_per_user}/user/mo`
        : `$${pkg.price}/mo`;

    return (
        <Card className={`relative ${isActive ? 'border-primary ring-2 ring-primary' : ''}`}>
            {isActive && (
                <Badge className="absolute -top-3 left-1/2 -translate-x-1/2">
                    Current Plan
                </Badge>
            )}
            
            <CardHeader>
                <CardTitle>{pkg.name}</CardTitle>
                <CardDescription className="text-2xl font-bold mt-2">
                    {priceDisplay}
                </CardDescription>
                {pkg.is_per_user_pricing && (
                    <p className="text-sm text-muted-foreground">
                        Min {pkg.min_users} users
                        {pkg.max_users && ` • Max ${pkg.max_users} users`}
                    </p>
                )}
            </CardHeader>

            <CardContent className="space-y-2">
                {pkg.features.map((feature) => (
                    <div key={feature.id} className="flex items-center gap-2">
                        <Check className="h-4 w-4 text-primary" />
                        <span className="text-sm">{feature.name}</span>
                    </div>
                ))}
            </CardContent>

            <CardFooter>
                <Button
                    onClick={() => onSelect(pkg)}
                    disabled={isActive}
                    className="w-full"
                    variant={isActive ? 'outline' : 'default'}
                >
                    {isActive ? 'Active' : 'Select Plan'}
                </Button>
            </CardFooter>
        </Card>
    );
};