'use client'

import { ReactNode } from 'react'
import { Warning } from '@phosphor-icons/react'
import { cn } from '@/lib/utils'

interface ChangelogEntryProps {
  version: string
  date: string
  children: ReactNode
}

export function ChangelogEntry({ version, date, children }: ChangelogEntryProps) {
  return (
    <div 
      data-version={version}
      className="flex gap-6 lg:gap-10 py-8 border-b border-border last:border-b-0"
    >
      {/* Left column - Version and date */}
      <div className="w-24 lg:w-32 shrink-0">
        <span className="inline-block px-2.5 py-1 text-sm font-medium rounded-md bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800">
          {version}
        </span>
        <p className="mt-2 text-sm text-muted-foreground">{date}</p>
      </div>
      
      {/* Right column - Content */}
      <div className="flex-1 min-w-0">
        {children}
      </div>
    </div>
  )
}

interface ChangelogTitleProps {
  children: ReactNode
  className?: string
}

export function ChangelogTitle({ children, className }: ChangelogTitleProps) {
  return (
    <h2 className={cn("text-xl font-semibold text-foreground mb-3", className)}>
      {children}
    </h2>
  )
}

interface ChangelogDescriptionProps {
  children: ReactNode
}

export function ChangelogDescription({ children }: ChangelogDescriptionProps) {
  return (
    <p className="text-muted-foreground mb-4">
      {children}
    </p>
  )
}

interface ChangelogImageProps {
  src: string
  alt?: string
}

export function ChangelogImage({ src, alt = "Screenshot" }: ChangelogImageProps) {
  return (
    <div className="my-6 rounded-lg border border-border overflow-hidden shadow-sm">
      <img src={src} alt={alt} className="w-full" />
    </div>
  )
}

interface BreakingChangeProps {
  children: ReactNode
}

export function BreakingChange({ children }: BreakingChangeProps) {
  return (
    <div className="my-6 flex gap-3 p-4 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
      <Warning className="h-5 w-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" weight="fill" />
      <div className="text-amber-800 dark:text-amber-200 text-sm">
        {children}
      </div>
    </div>
  )
}

interface MoreUpdatesProps {
  children: ReactNode
}

export function MoreUpdates({ children }: MoreUpdatesProps) {
  return (
    <div className="mt-6">
      <h3 className="text-lg font-semibold text-foreground mb-3">More Updates</h3>
      <ul className="space-y-2 text-muted-foreground">
        {children}
      </ul>
    </div>
  )
}

interface UpdateItemProps {
  children: ReactNode
  type?: 'default' | 'behavior'
}

export function UpdateItem({ children, type = 'default' }: UpdateItemProps) {
  return (
    <li className="flex items-start gap-2">
      <span className="mt-2 h-1.5 w-1.5 rounded-full bg-foreground shrink-0" />
      <span>
        {type === 'behavior' && (
          <strong className="font-semibold text-foreground">Behavior Change </strong>
        )}
        {children}
      </span>
    </li>
  )
}
