import React from "react";
import { motion } from "framer-motion";
import { Card, CardHeader, CardTitle, CardContent } from "@/common/components/ui/card";

interface TabContentProps {
    id: string;
    title: string;
    icon: React.ReactNode;
    children: React.ReactNode;
    className?: string;
    footer?: React.ReactNode;
}

export const TabContent = ({
    id,
    title,
    icon,
    children,
    className,
    footer
}: TabContentProps) => (
    <motion.div
        key={id}
        initial={{ opacity: 0, x: 20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -20 }}
        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
        className="space-y-6"
    >
        <Card className="glass border-border/50! overflow-hidden rounded-3xl">
            <CardHeader className="bg-secondary/30 border-b border-border/40 p-6">
                <CardTitle className="text-xl font-bold! flex items-center gap-4">
                    <div className="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
                        {icon}
                    </div>
                    {title}
                </CardTitle>
            </CardHeader>
            <CardContent className={className}>
                {children}
            </CardContent>
        </Card>
        {footer}
    </motion.div>
);
