import React from 'react';
import { Link } from 'react-router-dom';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.jsx';
import { Button } from '@/components/ui/button.jsx';
import { Badge } from '@/components/ui/badge.jsx';
import { Check } from 'lucide-react';
import { motion } from 'framer-motion';

export default function PlanCard({ 
  name, 
  slug,
  price, 
  appreciation, 
  recommended, 
  features = [],
  highlighted = false,
  index = 0
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      className="h-full"
    >
      <Card className={`h-full flex flex-col transition-all duration-300 hover:shadow-xl ${
        highlighted ? 'ring-2 ring-primary scale-105' : ''
      }`}>
        <CardHeader>
          <div className="flex items-start justify-between mb-2">
            <CardTitle className="text-2xl font-bold">{name}</CardTitle>
            {highlighted && (
              <Badge className="bg-primary text-primary-foreground">
                Recomendado
              </Badge>
            )}
          </div>
          <CardDescription className="text-base">{price}</CardDescription>
        </CardHeader>
        <CardContent className="flex-1">
          <div className="space-y-4">
            <div>
              <p className="text-sm font-medium text-muted-foreground mb-1">
                Valorização estimada
              </p>
              <p className="text-xl font-bold text-primary">{appreciation}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground mb-1">
                Recomendado para
              </p>
              <p className="text-sm">{recommended}</p>
            </div>
            {features.length > 0 && (
              <div className="pt-4 border-t">
                <ul className="space-y-2">
                  {features.map((feature, idx) => (
                    <li key={idx} className="flex items-start gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </CardContent>
        <CardFooter className="mt-auto">
          <Button asChild className="w-full" variant={highlighted ? 'default' : 'outline'}>
            <Link to={`/${slug}`}>Saiba mais</Link>
          </Button>
        </CardFooter>
      </Card>
    </motion.div>
  );
}