import { Card } from '@/libs/frontend-ui-primitives'

export default function OperationsTrackNote({
  track,
  note,
  className,
}: {
  track: number
  note: string
  className?: string
}) {
  return (
    <Card className={className ?? 'mb-6 border border-violet-200 bg-violet-50/70 dark:border-violet-900/50 dark:bg-violet-950/20'}>
      <div className="text-xs font-semibold uppercase tracking-[0.2em] text-violet-700 dark:text-violet-200">
        Track {track} public surface
      </div>
      <p className="mt-2 text-sm leading-6 text-violet-950 dark:text-violet-100">{note}</p>
    </Card>
  )
}
