import React from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Users, FileText, Globe, Lock, Plus, LogOut } from 'lucide-react';
import { SocialGroup } from '../../../types';

interface GroupCardProps {
  group: SocialGroup;
  onJoin?: () => void;
  onLeave?: () => void;
  onClick?: () => void;
  isMember?: boolean;
}

export const GroupCard: React.FC<GroupCardProps> = ({
  group,
  onJoin,
  onLeave,
  onClick,
  isMember,
}) => {
  return (
    <Card
      variant="default"
      className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-cyan/50 transition-all flex flex-col h-full"
      onClick={onClick}
    >
      <div className="h-32 relative overflow-hidden bg-gray-900">
        <img
          src={group.coverUrl}
          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-80 group-hover:opacity-100"
        />
        <div className="absolute top-2 right-2">
          <span
            className={`px-2 py-1 rounded text-[10px] font-bold uppercase backdrop-blur-md flex items-center gap-1 ${group.isPrivate ? 'bg-black/60 text-kodo-gold' : 'bg-black/60 text-kodo-cyan'}`}
          >
            {group.isPrivate ? (
              <Lock className="w-3 h-3" />
            ) : (
              <Globe className="w-3 h-3" />
            )}
            {group.isPrivate ? 'Private' : 'Public'}
          </span>
        </div>
      </div>

      <div className="p-5 flex flex-col flex-1">
        <h3 className="font-bold text-white text-lg mb-1 truncate">
          {group.name}
        </h3>
        <p className="text-sm text-gray-400 mb-4 line-clamp-2 flex-1">
          {group.description}
        </p>

        <div className="flex items-center gap-4 text-xs text-gray-500 mb-4 font-mono">
          <span className="flex items-center gap-1">
            <Users className="w-3 h-3" /> {group.members.toLocaleString()}
          </span>
          {/* Mock post count derived from members for demo */}
          <span className="flex items-center gap-1">
            <FileText className="w-3 h-3" />{' '}
            {Math.floor(group.members / 5).toLocaleString()} posts
          </span>
        </div>

        <div onClick={(e) => e.stopPropagation()}>
          {isMember ? (
            <Button
              variant="ghost"
              size="sm"
              className="w-full border border-kodo-steel hover:bg-red-500/10 hover:text-kodo-red hover:border-kodo-red"
              onClick={onLeave}
            >
              <LogOut className="w-4 h-4 mr-2" /> Leave Group
            </Button>
          ) : (
            <Button
              variant="primary"
              size="sm"
              className="w-full"
              onClick={onJoin}
            >
              <Plus className="w-4 h-4 mr-2" /> Join Group
            </Button>
          )}
        </div>
      </div>
    </Card>
  );
};
