"use client";

import { Home, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useOnboardingStore } from "@/stores/onboarding";
import { cn } from "@/lib/utils";

interface PathCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  onClick: () => void;
}

function PathCard({ icon, title, description, onClick }: PathCardProps) {
  return (
    <Card
      className={cn(
        "cursor-pointer transition-all hover:border-primary hover:shadow-md"
      )}
      onClick={onClick}
    >
      <CardContent className="flex flex-col items-center text-center space-y-3 py-8">
        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary">
          {icon}
        </div>
        <h3 className="text-lg font-semibold">{title}</h3>
        <p className="text-sm text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  );
}

export function ChoosePathStep() {
  const { setPath, prevStep } = useOnboardingStore();

  return (
    <div className="space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-2xl font-bold tracking-tight">
          How would you like to start?
        </h2>
        <p className="text-muted-foreground">
          You can always do both later.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <PathCard
          icon={<Home className="size-7" />}
          title="Create a residence"
          description="Set up your first property to start tracking maintenance."
          onClick={() => setPath("create")}
        />
        <PathCard
          icon={<Users className="size-7" />}
          title="Join a residence"
          description="Join an existing property with a share code from the owner."
          onClick={() => setPath("join")}
        />
      </div>

      <div className="flex justify-center">
        <Button variant="ghost" onClick={prevStep}>
          Back
        </Button>
      </div>
    </div>
  );
}
