import { Link } from "react-router";
import { Button } from "~/components/ui/button";

export function LeagueSettingsHeader({
  leagueId,
  leagueName,
}: {
  leagueId: string;
  leagueName: string;
}) {
  return (
    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <h1 className="text-3xl font-bold sm:text-4xl">League Settings</h1>
        <p className="mt-1 text-muted-foreground">{leagueName}</p>
      </div>
      <Button variant="outline" asChild>
        <Link to={`/leagues/${leagueId}`}>Back to League</Link>
      </Button>
    </div>
  );
}