
import React from 'react';
import { Plus } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { cn } from '@/utils';

interface CreateProjectCardProps {
  onClick: () => void;
  className?: string;
  label?: string;
}

export function CreateProjectCard({ onClick, className, label = '新建项目' }: CreateProjectCardProps) {
  return (
    <Card 
      onClick={onClick}
      className={cn(
        "group flex flex-col items-center justify-center aspect-[16/10] bg-card hover:bg-muted/50 transition-all cursor-pointer border-dashed border-2 border-border/50 hover:border-primary/50 relative overflow-hidden",
        className
      )}
    >
      <div className="flex flex-col items-center gap-3 z-10">
        <div className="w-12 h-12 rounded-full bg-muted border border-border group-hover:border-primary/50 group-hover:bg-primary/10 flex items-center justify-center transition-all duration-300">
          <Plus size={24} className="text-muted-foreground group-hover:text-primary transition-colors" />
        </div>
        <span className="font-medium text-muted-foreground group-hover:text-foreground transition-colors">{label}</span>
      </div>
    </Card>
  );
}
