Client-Side Subscription Checks

"use client";
 
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { cn } from "@/utils/styles";
 
interface ForageEntry {
  name: string;
  type: string;
  edibility: string;
  season: string;
  habitat: string;
  description: string;
  tips: string;
}
 
interface FieldGuideCardProps {
  className?: string;
}
 
export default function FieldGuideCard({ className }: FieldGuideCardProps) {
  const [isLoading, setIsLoading] = useState(false);
  const [entry, setEntry] = useState<ForageEntry | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  async function handleDiscover() {
    setIsLoading(true);
    setError(null);
 
    try {
      const response = await fetch("/api/field-guide", {
        method: "POST",
      });
 
      if (!response.ok) {
        if (response.status === 403) {
          setError("Membership required to access the Field Guide");
        } else {
          setError("Failed to fetch entry");
        }
        setIsLoading(false);
        return;
      }
 
      const data = await response.json();
      setEntry(data);
    } catch (err) {
      setError("Network error. Please try again.");
    }
 
    setIsLoading(false);
  }
 
  const edibilityColors: Record<string, string> = {
    edible: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
    caution: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
    "poisonous-lookalike": "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
  };
 
  return (
    <Card className={cn("p-6", className)}>
      <div className="flex items-center justify-between">
        <div>
          <h2 className="font-medium">Discover Foraging Entries</h2>
          <p className="text-muted-foreground text-sm">
            Explore our curated database of edible plants and mushrooms
          </p>
        </div>
        <Button onClick={handleDiscover} disabled={isLoading}>
          {isLoading ? "Discovering..." : "Discover New Entry"}
        </Button>
      </div>
 
      {error && (
        <p className="mt-4 text-sm text-destructive">{error}</p>
      )}
 
      {entry && (
        <div className="mt-6 space-y-4 border-t pt-4">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold">{entry.name}</h3>
            <span
              className={cn(
                "px-2 py-1 text-xs rounded-full capitalize",
                edibilityColors[entry.edibility] || "bg-gray-100"
              )}
            >
              {entry.edibility}
            </span>
          </div>
 
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="text-muted-foreground">Type:</span>{" "}
              <span className="capitalize">{entry.type}</span>
            </div>
            <div>
              <span className="text-muted-foreground">Season:</span>{" "}
              {entry.season}
            </div>
          </div>
 
          <div className="text-sm">
            <span className="text-muted-foreground">Habitat:</span>{" "}
            {entry.habitat}
          </div>
 
          <p className="text-sm">{entry.description}</p>
 
          <div className="bg-muted p-3 rounded-lg text-sm">
            <span className="font-medium">Foraging Tips:</span> {entry.tips}
          </div>
        </div>
      )}
    </Card>
  );
}

const forageDatabase = [
  {
    name: "Chanterelle",
    type: "mushroom",
    edibility: "edible",
    season: "Summer to Fall",
    habitat: "Oak and conifer forests, mossy areas",
    description:
      "Golden-yellow trumpet-shaped mushroom with a fruity, apricot-like aroma.",
    tips: "Look for false gills that fork and run down the stem.",
  },
  {
    name: "Ramps (Wild Leeks)",
    type: "plant",
    edibility: "edible",
    season: "Early Spring",
    habitat: "Rich, moist deciduous forests",
    description:
      "Broad, smooth green leaves with a strong garlic-onion flavor.",
    tips: "Harvest sustainably by taking only one leaf per plant.",
  },
  // ... more entries
];
 
export async function POST() {
  // TODO: Add subscription check (lesson 3.4)
 
  const randomItem =
    forageDatabase[Math.floor(Math.random() * forageDatabase.length)];
 
  return Response.json(randomItem);
}