import { cn } from '@/utils/cn'

// 조건부 클래스
;<div
  className={cn(
    'base-class',
    isActive && 'active-class',
    variant === 'primary' && 'primary-class'
  )}
/>

import { cn } from '@/utils/cn'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface RecordCardProps {
  title: string
  emotions: string[]
  className?: string
}

function RecordCard({ title, emotions, className }: RecordCardProps) {
  return (
    <Card className={cn('w-full', className)}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-2">
          {emotions.map(emotion => (
            <Badge
              key={emotion}
              variant="secondary">
              {emotion}
            </Badge>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

export default RecordCard