From 2f579b08ba3d2676113bc8286f8fd39bd74066cb Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 11 Nov 2025 22:56:15 +0000
Subject: [PATCH] Add date precision help text

Extend FlexibleDateInput with contextual help text for all precision options (exact, month, year, decade, century, approximate), including an Info icon import and dynamic guidance displayed under the dropdown. Also prepare for enhanced SelectItem labels and optional tooltip enhancements.
---
 src/components/ui/flexible-date-input.tsx | 26 ++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/flexible-date-input.tsx b/src/components/ui/flexible-date-input.tsx
index 2c33bfbb..f47117d1 100644
--- a/src/components/ui/flexible-date-input.tsx
+++ b/src/components/ui/flexible-date-input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, Info } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
@@ -119,6 +119,25 @@ export function FlexibleDateInput({
     }
   };
 
+  const getPrecisionHelpText = () => {
+    switch (localPrecision) {
+      case 'exact':
+        return 'Use when you know the specific day (e.g., June 15, 2010)';
+      case 'month':
+        return 'Use when you only know the month (e.g., June 2010)';
+      case 'year':
+        return 'Use when you only know the year (e.g., 2010)';
+      case 'decade':
+        return 'Use for events in a general decade (e.g., 1980s). Enter any year from that decade.';
+      case 'century':
+        return 'Use for very old dates spanning a century (e.g., 19th century). Enter any year from that century.';
+      case 'approximate':
+        return 'Use when the date is uncertain or estimated (e.g., circa 2010)';
+      default:
+        return '';
+    }
+  };
+
   return (
     <div className={cn("space-y-2", className)}>
       {label && <Label>{label}</Label>}
@@ -181,6 +200,11 @@ export function FlexibleDateInput({
           </SelectContent>
         </Select>
       </div>
+      
+      <div className="flex items-start gap-2 text-xs text-muted-foreground">
+        <Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
+        <p>{getPrecisionHelpText()}</p>
+      </div>
     </div>
   );
 }