"use client"

import { useState } from "react"
import { addDays } from "date-fns"
import type { DateRange } from "react-day-picker"

import { Calendar } from "@/components/ui/calendar"
import { DatePicker } from "@/components/ui/date-picker"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { ComponentContainer } from "@/components/ui/component-container"

export function CalendarSection() {
  const [date, setDate] = useState<Date>()
  const [dateRange, setDateRange] = useState<DateRange>({
    from: new Date(),
    to: addDays(new Date(), 7),
  })

  return (
    <div className="space-y-8">
      {/* Page Title */}
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tight">Calendar</h1>
        <p className="text-muted-foreground">
          Calendar components for date selection, providing various ways to select and display dates.
        </p>
      </div>

      <section id="calendar" className="mb-12 scroll-mt-16">
        <ComponentContainer
          title="Basic Calendar"
          description="A simple calendar component for selecting a date."
          code={`import { Calendar } from "@/components/ui/calendar"
import { useState } from "react"

export function CalendarDemo() {
  const [date, setDate] = useState<Date>()
  
  return (
    <div className="flex justify-center">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="rounded-md border"
      />
    </div>
  )
}`}
        >
          <div className="flex justify-center p-6 w-full">
            <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Date Picker"
          description="A date picker with a popover calendar for selecting a single date."
          code={`import { DatePicker } from "@/components/ui/date-picker"
import { useState } from "react"

export function DatePickerDemo() {
  const [date, setDate] = useState<Date>()
  
  return (
    <div className="flex justify-center">
      <DatePicker date={date} setDate={setDate} />
    </div>
  )
}`}
        >
          <div className="flex justify-center p-4 w-full">
            <DatePicker date={date} setDate={setDate} />
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Date Range Picker"
          description="A date picker for selecting a range of dates."
          code={`import { DateRangePicker } from "@/components/ui/date-range-picker"
import { useState } from "react"
import { DateRange } from "react-day-picker"
import { addDays } from "date-fns"

export function DateRangePickerDemo() {
  const [dateRange, setDateRange] = useState<DateRange>({
    from: new Date(),
    to: addDays(new Date(), 7),
  })
  
  return (
    <div className="flex justify-center">
      <DateRangePicker dateRange={dateRange} setDateRange={setDateRange} />
    </div>
  )
}`}
        >
          <div className="flex justify-center p-4 w-full">
            <DateRangePicker dateRange={dateRange} setDateRange={setDateRange} />
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Month Picker"
          description="A calendar configured to select months instead of days."
          code={`import { Calendar } from "@/components/ui/calendar"
import { useState } from "react"

export function MonthPickerDemo() {
  const [date, setDate] = useState<Date>()
  
  return (
    <div className="flex justify-center">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        captionLayout="dropdown-buttons"
        fromYear={2020}
        toYear={2030}
        className="rounded-md border"
      />
    </div>
  )
}`}
        >
          <div className="flex justify-center p-6 w-full">
            <Calendar
              mode="single"
              selected={date}
              onSelect={setDate}
              captionLayout="dropdown-buttons"
              fromYear={2020}
              toYear={2030}
              className="rounded-md border"
            />
          </div>
        </ComponentContainer>
      </section>
    </div>
  )
}