website/app/composables/ServiceCard.ts

interface UptimeHistoryItem {
  date: string
  status: string
  incident?: string
}

export interface ServiceCardProps {
  name: string
  status: string
  uptimePercentage: number
  uptimeHistory: Array<UptimeHistoryItem>
}

export default {
  props: {
    name: { type: String, required: true },
    status: { type: String, default: 'Normal' },
    uptimePercentage: { type: Number, default: 100.00 },
    uptimeHistory: { type: Array, required: true }
  },
  setup() {
    const formatTooltip = (day: UptimeHistoryItem) => {
      return `${day.date}: ${day.status.toUpperCase()} (${day.incident || 'No incidents'})`
    }

    return {
      formatTooltip
    }
  }
}