honeyDueWeb/src/components/residences/residence-card.tsx

"use client";

import Link from "next/link";
import { MapPin } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { useDataProvider } from "@/lib/demo/data-provider-context";
import type { MyResidenceResponse } from "@/lib/api/residences";

interface ResidenceCardProps {
  data: MyResidenceResponse;
}

export function ResidenceCard({ data }: ResidenceCardProps) {
  const { residence, task_summary } = data;
  const { basePath } = useDataProvider();

  const address = [residence.street_address, residence.city, residence.state_province]
    .filter(Boolean)
    .join(", ");

  return (
    <Link href={`${basePath}/residences/${residence.id}`} className="block group">
      <div className="rounded-2xl border border-border bg-card p-5 transition-all duration-200 hover:shadow-md hover:shadow-black/[0.04] hover:-translate-y-0.5 hover:border-primary/30">
        <div className="mb-3">
          <h3 className="font-heading font-bold text-base leading-tight group-hover:text-primary transition-colors">
            {residence.name}
          </h3>
          {address && (
            <div className="flex items-center gap-1.5 text-sm text-muted-foreground mt-1.5">
              <MapPin className="size-3.5 shrink-0" aria-hidden="true" />
              <span className="sr-only">Address:</span>
              <span className="truncate">{address}</span>
            </div>
          )}
        </div>
        <div className="flex flex-wrap gap-2">
          {task_summary.overdue > 0 && (
            <Badge variant="destructive" className="rounded-lg">
              {task_summary.overdue} overdue
            </Badge>
          )}
          {task_summary.due_soon > 0 && (
            <Badge variant="secondary" className="rounded-lg">
              {task_summary.due_soon} due soon
            </Badge>
          )}
          <Badge variant="outline" className="rounded-lg">
            {task_summary.total} {task_summary.total === 1 ? "task" : "tasks"}
          </Badge>
        </div>
      </div>
    </Link>
  );
}