since3-website/modules/landingPage/ui/components/tools/snippet-tool.tsx

"use client"

import { useId, useState } from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { runSnippetCheck, truncate, type OutputLine } from "@/modules/landingPage/lib/tools"

import { ToolOutput } from "./tool-output"

export function SnippetTool() {
  const id = useId()
  const [title, setTitle] = useState("Webdesign in Steinfurt – since3 Digitalagentur")
  const [description, setDescription] = useState(
    "Schnelle, barrierefreie Websites aus Steinfurt. Kostenloses Erstgespräch vereinbaren."
  )
  const [lines, setLines] = useState<OutputLine[] | null>(null)

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setLines(runSnippetCheck(title, description))
  }

  return (
    <form onSubmit={onSubmit} className="grid gap-6">
      <p className="text-ink-300">
        Zeigt, wie dein Suchergebnis aussieht, und prüft Länge und Suchbegriffe
        von Titel und Beschreibung.
      </p>

      <div className="grid gap-4">
        <div className="grid gap-2.5">
          <Label htmlFor={`${id}-title`}>Seitentitel</Label>
          <Input
            id={`${id}-title`}
            value={title}
            onChange={(event) => setTitle(event.target.value)}
          />
        </div>
        <div className="grid gap-2.5">
          <Label htmlFor={`${id}-description`}>Meta-Beschreibung</Label>
          <Textarea
            id={`${id}-description`}
            value={description}
            onChange={(event) => setDescription(event.target.value)}
            className="min-h-20"
          />
        </div>
      </div>

      {/* Live search result preview */}
      <div aria-label="Vorschau des Suchergebnisses" role="group" className="rounded-xl bg-white p-4 text-black">
        <p className="text-xs text-ink-600">since3.de</p>
        <p className="mt-1 text-lg leading-snug font-medium underline-offset-2">{truncate(title, 60) || "Seitentitel"}</p>
        <p className="mt-1 text-sm text-ink-700">
          {truncate(description, 160) || "Meta-Beschreibung"}
        </p>
      </div>

      <div>
        <Button type="submit" variant="solid">
          Snippet prüfen
        </Button>
      </div>

      <ToolOutput lines={lines} placeholder="Ergebnis erscheint hier." />
    </form>
  )
}