import { Swords } from "lucide-react";
import { Link } from "react-router";
import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card";
import { SectionCardHeader } from "~/components/ui/SectionCardHeader";

export function CreateLeagueCard() {
  return (
    <Card className="gap-2">
      <SectionCardHeader icon={Swords} title="Start a New League" />
      <CardContent className="px-3 sm:px-6">
        <p className="text-sm text-muted-foreground mb-4">
          Invite friends, pick your sports, and start drafting.
        </p>
        <Button asChild className="w-full">
          <Link to="/leagues/new">Create a League</Link>
        </Button>
      </CardContent>
    </Card>
  );
}