import { Heart, Calendar, DollarSign, ArrowRight } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

interface MobileContentCardProps {
  title: string;
  category: string;
  amount: string;
  deadline: string;
  description: string;
  isFavorited?: boolean;
  onFavoriteToggle?: () => void;
  onViewDetails?: () => void;
}

export const MobileContentCard = ({
  title,
  category,
  amount,
  deadline,
  description,
  isFavorited = false,
  onFavoriteToggle,
  onViewDetails
}: MobileContentCardProps) => {
  return (
    <Card className="mb-4 shadow-sm hover:shadow-md transition-all duration-300 active:scale-[0.98] transform">
      <CardContent className="p-4">
        {/* Header */}
        <div className="flex justify-between items-start mb-3">
          <div className="flex-1 pr-2">
            <h3 className="font-semibold text-gray-900 text-sm leading-tight mb-1">
              {title}
            </h3>
            <Badge variant="outline" className="text-xs">
              {category}
            </Badge>
          </div>
          <button
            onClick={onFavoriteToggle}
            className={`p-2 rounded-full transition-all duration-200 active:scale-90 ${
              isFavorited 
                ? 'text-red-500 bg-red-50 hover:bg-red-100' 
                : 'text-gray-400 hover:text-red-500 hover:bg-red-50'
            }`}
          >
            <Heart className={`w-4 h-4 ${isFavorited ? 'fill-current' : ''}`} />
          </button>
        </div>

        {/* Grant Details */}
        <div className="flex items-center space-x-4 mb-3 text-xs text-gray-600">
          <div className="flex items-center">
            <DollarSign className="w-3 h-3 mr-1" />
            <span>{amount}</span>
          </div>
          <div className="flex items-center">
            <Calendar className="w-3 h-3 mr-1" />
            <span>{deadline}</span>
          </div>
        </div>

        {/* Description */}
        <p className="text-sm text-gray-600 leading-relaxed mb-4 line-clamp-2">
          {description}
        </p>

        {/* Actions */}
        <div className="flex space-x-2">
          <Button
            onClick={onViewDetails}
            className="flex-1 h-9 text-sm font-medium group transition-all duration-200"
          >
            View Details
            <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-0.5 transition-transform duration-200" />
          </Button>
          <Button
            variant="outline"
            size="sm"
            className="px-3 h-9 transition-all duration-200 active:scale-95"
          >
            Save
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};