import * as React from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { cn } from '../../lib/utils';

interface OrganizationCardProps {
  name: string;
  mascot?: string;
  logo?: string;
  primaryColor?: string;
  href?: string;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
  className?: string;
}

export function OrganizationCard({
  name,
  mascot,
  logo,
  primaryColor = '#0f172a',
  href = '#',
  onClick,
  className
}: OrganizationCardProps) {
  return (
    <a href={href} onClick={onClick} className="block">
      <Card className={cn(
        'group cursor-pointer border-foreground/20 bg-background transition-all hover:-translate-y-1 hover:shadow-lg',
        className
      )}>
        <CardContent className="flex flex-col items-center p-6 text-center">
          {logo ? (
            <div className="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-foreground/10">
              <img src={logo} alt={name} className="h-20 w-20 object-contain" />
            </div>
          ) : (
            <div
              className="mb-4 flex h-24 w-24 items-center justify-center rounded-full text-primary-foreground"
              style={{ backgroundColor: primaryColor }}
            >
              <span className="text-2xl font-bold">
                {name.substring(0, 2).toUpperCase()}
              </span>
            </div>
          )}
          <h3 className="font-bold text-foreground group-hover:text-primary">{name}</h3>
          {mascot && <p className="mt-1 text-sm text-foreground/60">{mascot}</p>}
        </CardContent>
      </Card>
    </a>
  );
}
Organization Card

Central High

Installation

Usage
