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

@@ -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>
   );
 }